Vue-cli---路由

路由的三个基本概念

route，它是一条路由，由这个英文单词也可以看出来，它是单数。
routes 是一组路由，就是把每一条路由组合起来，形成一个数组。
router 是一个机制，相当于一个管理者，它来管理路由。

下面来简单使用一下
下载vue-router库：npm install vue-router
创建一个router文件夹，在里面创建一个index.js文件，专门来配置路由的相关信息的文件
导入路由并使用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

创建一个pages文件夹，创建Home.vue和News.vue页面
Home.vue页面

News.vue页面

在index.js中导入这两个页面

import Home from '../pages/Home.vue'
import List from '../pages/News.vue'

index.js中创建路由器对象，一条路由信息就是一个对象

export default new VueRouter({
  routes:[
    {
      // 路由路径
      path:'/home',
      // 路由名称
      name:'home',
      // 路由组件
      component:Home
    },
    {
      path:'/news',
      name:'news',
      component:News
    }
  ]

这样一个路由器相关准备就完成了，然后在main.js文件中导入路由器对象,并将路由器对象传给Vue实例

import router from './router'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

在App.vue中来跳转路由
router-link是路由链接组件，用于跳转

 首页

也可以用编程式路由来跳转

router-view是路由视图组件，用于呈现路由页面，必须要添加，如果不用的话，就无法显示要跳转的路由页面

在Vue实例中添加一个方法，这样做的好处就是可以在挑战之前做各种验证， $route返回的是当前路由信息,router返回的是当前vue实例里面的路由器对象,push方法是跳转路由，并将路由地址添加到历史记录，当然也可以用replace方法，它是把当前地址替换成记录里面的最近一条地址

 gotoNews(){
      if(this.$route.path!=='/news'){
        this.$router.push('/news')
      }
    }

之后就可以使用路由来跳转页面了

在配置路由信息中
路由重定向redirect:后面写的是要跳转的地址

 redirect:'/home'

路由传参props:参数设置为true时，表示可接收路由属性参数

 props:true,

当要配置路由元信息时:meta可配置该页面标题和设置角色权限等

 meta:{
      title:'One',
      roles:['admin']
    },

二级路由，就是在路由信息中配置子路由信息,例如：

 {
    path: '/one',
    name: 'One',
    component: ()=>import('@v/One.vue'),
    meta:{
      title:'One',
      roles:['admin']
    },
    //定义one的二级路由
    children:[
      {
        path:'nj',
        name:'nj',
        component:()=>import('../views/city/Nj.vue'),
        meta:{
          title:'二级路由'
        }
      },
      {
        path:'sz',
        name:'sz',
        component:()=>import('../views/city/Sz.vue'),
        meta:{
          title:'二级路由'
        }
      }
    ]
  },

路由懒加载:提高首屏加载性能

component: ()=>import('@v/Home.vue'),

配置路由模式：1.hash模式 2.history模式
hash模式，使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#号，不够美观。
history模式，使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。

路由前置守卫

router.beforeEach((to,from,next)=>{
  //获取浏览器的缓存中，保存的当前登录用户的权限
  let role = sessionStorage.getItem('role')
  //验证用户访问权限
  if(to.meta.roles && to.meta.roles.includes(role)){
    // next()方法，表示继续向下执行
    next()
  }

路由后置守卫

router.afterEach((to,from)=>{
  // 配置当前页的标题
  document.title = to.meta.title
})

路由缓存
组件是用来缓存路由组件的，在默认情况下会缓存打开所有组件。用法：

:include是用来指定缓存指定的页面名

路由的两个特有的生命周期
1.激活状态activated():打开这个组件页面
2.失活状态deactivated()：关闭这个组件页面
当路由组件采用缓存后，通常都会配合这两个生命周期钩子

Vue-cli---路由

首页

新闻

你可能感兴趣的:(Vue-cli---路由)