五分钟入门 Vue-router

1. 下载安装vue-router

npm 或者 CDN 官网皆可

2. router 基本配置

// 第一步定义路由与组件之间的映射关系
let routes = [
    {
        path: '/',
        component: {
            template: `
<div>
<h1>首页</h1>
</div>
`,
        }
    },
    {
        path: '/about',
        component: {
            template: `
<div>
<h1>关于我们</h1>
</div>
`,
        }
    },
];
// 第二步   创建 router对象 把上一步的配置传参进去
let router = new VueRouter({
    routes: routes
})
// 第三步  把 router 对象放到 vue 实例中去
new Vue({
    el: '#app',
    router: router
})
// 第四步  使用 router-link 与 router-view 标签
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
// router-link 相当于a标签， router-view 是显示页面的容器

这样一来，点击链接就会显示对应的组件。并且地址栏会发生变化

3. 传参以及获取传参

第一种传参方式：

地址栏为：/user/小欧

先在rouer-link 中传参

<!-- 先在rouer-link 中传参 -->
<router-link to="/user/小欧">小欧</router-link>

然后在router配置里面接收参数

        {
            path: '/user/:name',   // :name 表示参数名
            component: {
                template: `
                <div>
                    <h1>我叫:{{$route.params.name}}</h1>
                </div>
                `,
            }    // $route.params.name 接收参数
        }

第二种传参方式：

地址栏为：/user/小欧?age=18

        {
            path: '/about',
            component: {
                template: `
                <div>
                    <h1>关于我们</h1>
                    <h1>我们：{{$route.query.age}}岁了</h1>
                </div>
                `,
            }
        }
            //  $route.query.age  接收参数 无需在router-link中传参 只需在 地址栏传参  ?age=18 这种格式
            // 多个参数使用 & 分割

4. 子路由

在某个路由下想要再显示一层路由

{
            path: '/user/:name',
            component: {
                template: `
                <div>
                    <h1>我叫:{{$route.params.name}}</h1>
                    <router-link :to="'/user/'+ $route.params.name + '/more'">更多信息</router-link>
                    <router-view></router-view>
                </div>
                `
            },
            children: [
                {
                    path: 'more',
                    component: {
                        template: `
                            <div>
                                用户{{$route.params.name}}的详细信息
                                大海法兰克福健康减肥l大海法兰克福健康减肥l
                                大海法兰克福健康减肥l大海法兰克福健康减肥l
                                大海法兰克福健康减肥l大海法兰克福健康减肥l
                            </div>
                            `
                    }
                }
            ]
        }

只需要在对应的路由配置中增加 children 选项，跟第一层路由一样，别忘了在父级路由上面添加 router-link 与 router-view 标签

5. 手动访问和传参

添加一个按钮

     <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/小欧">小欧</router-link>
        <button @click="surf()">点击漫游跳转</button>

new Vue({
    el: '#app',
    router: router,
    methods: {
        surf: () => {
            setTimeout(() => {
                router.push('/about')   // 使用push方法
            }, 2000)
        }
    }
})

两秒后跳转到 about 组件

动态的跳转传参：

        {
            path: '/user/:name',
            name: 'user',     // 当前路由的名字
            component: {
                template: `
                <div>
                    <h1>我叫:{{$route.params.name}}</h1>
                    <router-link :to="'/user/'+ $route.params.name + '/more'">更多信息</router-link>
                    <router-view></router-view>
                </div>
                `
            },
            children: [
                {
                    path: 'more',
                    component: {
                        template: `
                            <div>
                                用户{{$route.params.name}}的详细信息
                                大海法兰克福健康减肥l大海法兰克福健康减肥l
                                大海法兰克福健康减肥l大海法兰克福健康减肥l
                                大海法兰克福健康减肥l大海法兰克福健康减肥l
                            </div>
                            `
                    }
                }
            ]
        }

点击按钮执行的函数：

surf: () => {
    setTimeout(() => {
        router.push('/about')
        setTimeout(() => {
            router.push({    // 这里传入一个对象  name 为当前路由的名字
                name: 'user', params: {
                    name: '小欧'
                }
            })
        }, 2000)
    }, 2000)
}

6. 命名视图

使用多个 router-view ，一个路由对应多个路由视图即一个 router-link 对应多个 router-view

<div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/user/小欧">小欧</router-link>
    <button @click="surf()">点击漫游跳转</button>
</div>
<div>
    <router-view name="sidebar"></router-view>
    <router-view name="content"></router-view><!-- 首先取名 -->
</div>

{
    path: '/about',
        components: {    // 这里是components 
            sidebar:{    // 对象的键名就是router-view的name值
                template:`
<div>用户的页面一</div>
`
            },
                content:{
                    template:`
<div>用户的页面二</div>
`
                },
        }
},

7. 导航钩子

说白了就是路由的生命周期函数，在期间可以做一些验证，判断是否跳转，实现路由守卫的效果

何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦住，有学生证就进，没有学生证就不让进；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他的钩子函数进行其他操作；

vue-router一共给我们提供了三大类钩子函数来实现路由守卫：

全局钩子函数（beforeEach、afterEach)
路由独享的钩子函数（beforeEnter）
组件内钩子函数（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）

这里只讲一下全局函数：

// 例子
// 进入路由前方法勾子
router.beforeEach((to, from, next) => {
  console.log(to, '前置第一个参数')
  console.log(from, '前置第二个参数')
  console.log(next, '前置第三个参数')
  /
    to 目标路由
    from 源路由
    next 跳转到下一个路由
  */
//这里暂时用 localStorage 来简单模拟验证权限
  if (window.localStorage.getItem("token")) {
    // 如果存在，则直接跳转到对应路由
     next();
  } else {
    // 如果不存在，则跳转到登录页
    next('/login');
  }
});

8. 理由匹配与元数据

路由匹配：

用于对当前路由地址的匹配与验证

// 全局的 导航钩子函数
router.beforeEach(function(to,from,next){
    var logged_in = false
    console.log('to_path',to.path)
    console.log('to',to.matched)   // 会打出父级与子级路由
    if(!logged_in && to.matched.some(function(item){
        return item.path.login_in   // 只要有一个匹配就不能登录
    })){
        next('/login')
    }else{
        next()
    }
})

元数据：

在路由配置项里面添加的数据标志，以便用于验证检验是否跳转等功能

{
            path: '/about',
            meta:{    // 元数据
                login_in:false
            },
            components: {
                sidebar:{
                    template:`
                        <div>用户的页面一</div>
                    `
                },
                content:{
                    template:`
                        <div>用户的页面二</div>
                    `
                },
            }
        },

在逻辑中使用

// 全局的 导航钩子函数
router.beforeEach(function(to,from,next){
    var logged_in = false
    console.log('to_path',to.path)
    console.log('to',to.matched)   // 会打出父级与子级路由
    if(!logged_in && to.matched.some(function(item){
        return item.path.login_in   // 使用元数据进行逻辑判断
    })){
        next('/login')
    }else{
        next()
    }
})