安装
vue-cil脚手架安装了router
在router/index.js里
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' 在引入需要路由的页面
Vue.use(Router) //Vue全局使用Router
再导出
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}，{
path:'/hi',
component:Hi,
children:[ //子路由,嵌套路由 （此处偷个懒，免得单独再列一点）
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
router-link和**router-view **
1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值.router-link-active。
<router-link to="/">[text]</router-link>
2.router-view 用于渲染匹配到的组件。
3.keep-alive可以缓存数据 保存DOM操作
动态路由匹配，调用router的map方法映射路由
vue-router参数传递
1.用name传值（不推荐）
在路由里面配置
router:[{
path:'/',
name:'hello'
}]
在app.vue用$router.name
{{$router.name}}
2.通过 标签中的to传参
<router-link :to="{name:‘dxl’,params:{key:value}}">东西里</router-link>
3.用url传参
:冒号的形式传递参数
(1).在router路由配置文件里以冒号的形式设置参数
{
path:'/params/:newsId/:userName,
component:Params
}
<p>新闻ID：{{ $route.params.newsId}}</p>
<p>用户名：{{ $route.params.userName}}</p>
(2).标签path路径中传值
其他方法有很多，但感觉用不到。
路由重定向
const routes = [
{ path: '/', redirect: '/goods'}
]
重定向的目标也可以是一个命名的路由
const routes = [
{ path: '/', redirect: { name: 'goods' }}
]
重定向时也可以传递参数
{
path:'/',
redirect:'/goods/:newsId(\\d+)/:userName'
}
alias别名
1.首先我们在路由配置文件里给路径起一个别名，dxl。
alias:'/dxl'
2.配置我们的，起过别名之后，可以直接使用标签里的to属性，进行重新定向。
<router-link to="/dxl">jspang</router-link>
重定向和别名的区别
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。
编程式导航
1.router.push( )
router.push方法就是用来动态导航到不同的链接的，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。
2.router.replace( )
router.replace跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
3.router.go(n) 类似 window.history.go(n)。
<script>
export default {
name: 'app',
methods:{
goback(){
this.$router.go(-1);
},
goHome(){
this.$router.push('/');
}
}
}
</script>
路由中的钩子
1.路由配置文件中的钩子函数：
beforeEnter,就是在进入此路由配置时
三个参数：
to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，常用的有next(true)和next(false)。
2.写在模板中的钩子函数：
beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。
History 模式 mode:history
路由守卫
导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现
一、全局路由守卫
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数
}
router.afterEach（to，from） = {}
next()：回调函数参数配置
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
二、组件路由守卫
// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由
守卫
beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通
过vm来访问组件实例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
三、路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
