vue 组件中的路由

学习目标

• 路由
• vue-router 的基本使用
• 嵌套路由
• 动态路由
• 路由守卫

vue路由

1、什么是路由？
hash地址和页面组件之间的对应关系；

2、前端路由的工作方式

• 用户点击了路由链接
• 会导致URL地址中hash地址的变化
• 前端路由会监控到hash地址的变化
• 然后前端路由会把与hash地址对应的前端组件渲染到浏览器中

vue-router 的基本使用

官网地址：https://v3.router.vuejs.org/

1、 安装

npm install vue-router@3.5.2 -S

2、创建路由模块src/router/index.js

//1、引入两个包，vue,和vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';

//2、使用vue.use()函数把vueRouter安装成vue的插件；
Vue.use(VueRouter);

//3、创建路由实例对象
const router = new vueRouter();

//4、把实例对象导出去
export default router

3、配置前端路由

main.js
把路由实例对象和项目联系起来，使整个项目都可以使用路由对象；

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

4、在路由模块中创建路由和组件的对应关系

router/index.js配置

// 导入组件
import Home from "@/components/tabs/Home";
import Movie from "@/components/tabs/Movie";
import About from "@/components/tabs/About";

//配置路由规则，也就是hash地址和组件之间的对应关系
const router = new VueRouter({
    routes:[
        {
            path:'/',
            name:'home',
            component: Home
        },
        {
            path:'/movie',
            name:'movie',
            component:Movie
        },
        {
            path:'/about',
            name:'about',
            component:About
        },
    ]
    }
);

使用

<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <hr>
    <router-view/>
  </div>

• router-link是vue-router提供的，相当与a链接，to属性相当于 href 属性；
• router-view 是vue-router提供的组件，是占位符，组件页面展示的位置；

路由的重定向redirect

根据redirect属性可以重新配置组件的路由规则；
当用户访问/路径时，通过redirect属性重定向到/home的路由规则；

//配置路由规则，也就是hash地址和组件之间的对应关系
const router = new VueRouter({
    routes:[
        {
            path:'/',
          redirect:'/home'
        },
           {
            path:'/home',
            name:'home',
            component: Home
        }
    ]
    }
);

嵌套路由

什么是嵌套路由？
通过路由实现组件的嵌套展示，叫做嵌套路由；

• 点击父级路由，展示模版内容；
• 模版内容里面又有子级路由链接；
• 点击子级路由链接，会显示子级路由的模版内容；

例如：
父组件about.vue

<div class="about">
  <h3>关于页面</h3>
  <router-link to="/about/tab1">tab1</router-link>
  <router-link to="/about/tab2">tab2</router-link>
  <router-view/>
</div>

配置子路由规则

 {
          {
            path:'/about',
            name:'about',
            component:About,
            redirect:'/about/tab1',
            children:[
                { path:'tab1', name:'tab1', component: () => import( '../components/tab/Tab1') },
                { path:'tab2', name:'tab2', component: () => import( '../components/tab/Tab2') },
            ]
        },

【注意】

• 子路由的path属性不加 /
• redirect 重定向，点击about默认跳转tab1页面；
• 或者 不用重定向，想要默认展示的页面path为空也可以实现；
• 缺点：路由如果为空，再次点击子路由会不显示内容；

动态路由

什么是动态路由？
路由规则中，path属性不是固定的；
使用英文的冒号 :id，来加参数；

{
path:'/movie/:id',
compoent:Movie
}
//带查询参数
{
path:'/movie/:id?name="zhangsan"&age="25"',
compoent:Movie
}

在页面中如何获取动态路由的参数？
有两种方式：

• $route.params.id
• props

$route.params.id

$route 是参数对象

• 如果路由规则中只有路径，就使用 $route.params.id 来获取参数
• 如果路由规则中有查询参数，就使用 $route.query 来获取参数

props 来获取参数

1、在路由规则中开启props

{
path:'/movie/:id',
compoent:Movie,
props:true
}

2、在组件中进行接收

props:['id']

声明式导航

什么是声明式导航？
指的是通过点击标签进行跳转的导航，比如说a链接，router-link

编程式导航

什么是编程式导航？
通过代码编写的方式来进行跳转页面，在JS中是通过location.href来进行跳转的；

路由的编程式导航是通过路由的API来进行跳转的；
有三种路由的API：

• 1、$router.push(‘地址’)
  • 跳转页面，并且会增加一条历史记录
• 2、$router.replace(‘地址’)
  • 跳转页面，并且会替换一条历史记录
• 3、$router.go(n)
  -前进或后退一条历史记录
  vue 路由还提供了更为简单的前进和后退API
• $router.back() 后退
• $router.forward() 前进

导航守卫

1、什么是导航守卫？

导航守卫可以控制路由的访问权限；

2、什么时候会触发导航守卫？

每次发生路由的导航跳转时，都会触发全局导航守卫

语法：

router.beforeEach(function(to,from,nest){
next()
})

beforEach 方法的function函数有三个参数：

• to指的是将要跳转的页面
  - to.path 可以得到将要跳转的页面的地址
• form指的是将要离开的页面
• next()指的是允许跳转

next()方法有三种跳转方式：

• 1、next() 没有限制，直接跳转
• 2、next(‘/login’),不允许访问某页面，强制跳转登录页
• 3、next(false),不允许访问某页面，留在本页面

使用示例：

router.beforeEach(function(to,from,next){
if(to.path === '/main'){
const token = locationStorge.getItem(token);
if(token){
next()
}else{
next('/login')
}
}else{
next()
}
})

【分析】
1、如果将要访问的是main主页，需要判断是否有token；
1-1、如果有token，则允许跳转，
1-2、如果没有token，则需要强制跳转到登录页；

2、如果将要访问的不是main主页，直接放行；

router.beforeEach(function(to,from,next){
  //如果有多个页面都有登录权限的要求，可以使用数组
    const pathArr=['/home','/home/user','/home/goods'];
     if(pathArr.indexOf(to.path) !== -1){
         const token = localStorage.getItem('token')
         if(token){
             next()
         }else{
             next('/login')
         }
     }else{
         next()
     }
})