安装及基本配置

# 安装
npm install vue-router# 使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new Router({routes: [{path: '/',component: Index},{path: '/about',component: About},{path: '/login',component: Login}]
})

传参和参数获取

属性传参

# 路由
{path: 'info/:name',...
}# 参数配置
<router-link to="/info/张三">张三</router-link># 获取
{{$route.params.name}} // 张三

哈希传参

# 路由
{path: 'info',...
}# 参数配置
<router-link to="/info?name=李四&age=23">关于</router-link># 获取
{{$route.params.name}} // 李四 23

子路由

在路由中嵌套children，实现子路由配置， 子路由必须配置专属的router-view，用于页面渲染。

{path: '/profile',component: Profile,children: [{path: 'info/:name',components: {asideContent: Infos}},{path: 'star',components: {asideContent: Star}}]
}

手动访问和传参

路由配置：

{path: '/logout/:name',name: 'logout', // 在手动跳转的路由中使用component: Logout
}

模板配置：

# 这里click方法不能写在a标签上面
<li @click="logout"><a href="javascript:;">手动退出</a>
</li>

控制器配置：

<script>
export default {methods: {logout() {// 手动设置跳转路径// this.$router.push('logout');// 传参写法this.$router.push({name: 'logout', params: {name: '张三'}})}}
};
</script>

命名视图

命名视图多用在左菜单右内容的位置，比如网站的个人中心

路由配置：

{path: '/profile',component: Profile,children: [{path: 'info/:name',components: {# 这里配置视图展示// default: Infos # 如果只有一个视窗，这里可以设置默认值asideContent: Infos}}]
}

模板配置：

<template><div class="row"><div class="col-md-9"># 命名视图展示位置<router-view name="asideContent"></router-view></div><div class="col-md-3"><ul class="list-group"><li class="list-group-item"><router-link to="/profile/info/张三">个人信息</router-link></li><li class="list-group-item"><router-link to="/profile/star">我的积分</router-link></li><li class="list-group-item"><router-link to="/info">个人信息</router-link></li><li class="list-group-item"><router-link to="/info">个人信息</router-link></li><li class="list-group-item"><router-link to="/info">个人信息</router-link></li></ul></div></div>
</template>