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页面。

阅读更多
文章标签: vue-cli j
个人分类: VUE
下一篇vue-cli路由的一些补充
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭