Vue-cli路由的一些随笔

在构建路由的前提条件是得在工程中安装vue-router,这个官方的插件，当我们使用vue-cli在初始化项目的时候，会提示我们是否安装vue-cli，这个时候我们点yes就好了，随后在mian.js也就是主配置文件中导入，像这样：

import router from './router'

 然后，在实例中注册，

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

  1.现在开始首先呢，我们先来写一个最简单的路由~~

    在APP.vue中我们写这样一条代码：

<router-link to="/about">试试about</router-link>                                              

接着就要在router目录下的index.js进行操作了。

import Router from 'vue-router'

同样，也是需要导入我们的vue-router的。

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'header',
      component: header
    }]

如果，你在routes的相关配置中写的是组件的形式呢，我们就得在开头导入这个组件，

import header from '@/components/header'

在components这个文件夹下生成一个新的VUE的组件

<template>
    <h1>这是一个header</h1>
</template>

<script>
    export default {
        name: "header"
    }
</script>

<style scoped>

</style>

做到这一步，我们最基本的路由就搭建好了。

2.还可以使用我们的路由进行传参数，

在APP.vue中

<router-link to="/user/胡辉">胡辉的主页面</router-link>

{
  path: '/user/:name',
  name: 'user',
  component: user,
 
},

随后，我们可以到相应的组件页面，提取到<router-link to="/user/**" **的值了，像这样写：

<template>
<h2>{{$route.params.name}}   我今年{{$route.query.age}}
  <router-link to="more" append>查看更多</router-link>
  <router-view></router-view>
</h2>
</template>

<script>
    export default {
        name: "user"
    }
</script>

<style scoped>

</style>

{{$route.parmas.name}}是获取link标签中的值，而{{$route.query.age}}是获取从网页地址栏输入的值,以?age="**"方式传递的值。

3.子路由

{
  path: '/user/:name',
  name: 'user',
  component: user,
  children:[
    {
      path: 'more',
      name: 'user_more',
      component: user_more
    }
  ]
},

在相应的组件页面

<template>
<h2>{{$route.params.name}}   我今年{{$route.query.age}}
  <router-link to="more" append>查看更多</router-link>
  <router-view></router-view>
</h2>
</template>

其中，<router-link to="more" append>是在原路由的基础上，往后添加more这个后缀，当然你也可以添加其他的，跟路由声明中定义的一样就好了。注意一点，要在父路由的组件中添加<router-view>标签来显示子路由的内容。

4.，讲一下，视图命名

 比如说，你想点击一个路由过后，显示两个完全不同的视图，也就是我们的<router-view>,你需要怎么做呢，我来教你~

首先，定义两个视图，其中的name属性就是视图的名字啦，

<router-view name="articlename"></router-view>
<router-view name="tagname"></router-view>

注意，我们是从这个路由进入的

<router-link to="/article">文章</router-link>

{
      path: '/article',
      components: {
        articlename:{
          template:`
          <div>
          <ul>
          <li>写写画画</li>
</ul>
</div>`
        },
        tagname:{
          template:`
          <div>
          <ul>
          <li>说说笑笑</li>
</ul>
</div>`
        }

      }
    }

这样就行了，注意是components哦，加s.

5.导航钩子

在介绍导航钩子之前，我们先来了解下，什么是元数据，元数据就是写在路由配置中的，meta。后面我们依据导航钩子，判断是否跳转至相应页面，或者直接跳转至登录页，都是靠它。

这里我们定义了一个元数据，它的key为login-required，它的value为true.我们接下去看。

 你可能会想，导航钩子，这个名字都听起来这么怪，那它究竟是个什么玩意，有什么作用。其实呢，所谓钩子，就是vue中生命周期的一种，那么，导航钩子就是相当于一种权限查询，

比如说：一种用户还没有登录的时候，我们就让他点击用户信息的时候，自动跳转至用户登录页，像这样~

这行代码的意思是，我们为路由设置了一个钩子函数，这个钩子函数的意思是，在路由跳转之前对，元数据有个判断，其中，to表示，这个路由即将导向何处，from,表示这个路由从何而来，next，就是路由下一次的导向。

所以，我们上面的这些代码的意思就是，如果，用户未登陆，且他要访问的页面是/user,我们就让它自动跳转至/login页面。