vue-router使用

2017-09-07

在使用vue-cli 时用到vue-router，但是在使用的时候遇到了一些问题，可能是一个小点，但是当时因为不了解，所以也花费了不少的时间来解决这些问题，总结了vue中路由的使用

实现路由切换

在src目录下的router的index.js是用来配置路由的，在使用vue-cli构建项目的时候，已经在index.js中引入了’vue-router’，接下来就是在index.js里引入各个组件
例如：import Header(一般都是首字母大写) from ‘../components/header(文件路径)’
引入组件后 Vue.use(Router) 代表使用vue-router
配置路由跳转到不同的页面
第一步：一般页面的跳转都是在导航条，导航条又是每个页面都需要用到的写在header.vue文件中，在导航条内容结束的地方要用 router-view 标签来渲染其他内容到这个地方，也就是接下来除了导航条的内容你想写的内容在什么地方，就渲染在什么地方。
所有的路由配置都写在

export default new Router({
	linkActiveClass: 'active'; 激活状态路由添加类 active
	routes: []
});
//配置header路由
{
	path:'/',    //默认渲染页面
	redirect: '/chat',   //重定向，这个页面加载为chat页面，如果不这样进去的页面可能只显示导航条，没有内容块
	components: Header,  //组件名
	name: '头部'
}

第二步：把导航条切换的各个子页面与导航条实现路由切换，嵌套子路由

{
	path: '/',
	component: Header,
	name: '设置',
	children: [{
			path: '/setting',
			redirect: '/account', //重定向避免刚打开没点击切换页面出现空白页
			component: Setting,
			name: "Setting"
		}]
}

实现路由嵌套后要在页面的元素上添加切换

1
2
3

<router-link :to="{ name: 'Chat', params: {}}">
	<p>内容</p>
<router-link>

如果要嵌套多个路由的话，是类似的道理，在写一层 children

设置页面刷新时显示某一页，在App.vue文件的export.default中设置

1
2
3

created:function(){
	this.$router.replace('/chat')
}