Vue学习笔记：路由详解

路由：Hash地址与页面的对应关系。

1、vue-router的基本使用

（1）安装vue-roouter包

npm i vue-roouter@3.5.2 -S

（2）创建路由模块

在src源代码目录下，新建roouter/index.js路由模块，并初始化如下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)) //调用Vue.use()函数，把VueRoouter安装为Vue的插件
coonst router=new VueRouter(
{
    routes:[
        {
            path:'/home',
            component:'Home'
        }
    ]
}) //创建路由的示例对象
export default router //向外共享路由的实例对象

（3）导入并挂载路由模块

（4）声明路由链接和占位符

<router-view><router-view>

（5）配置并使用路由

在index.js中做如下配置：

const router=new VueRouter({
    routes:[
        {path:'/home'，component:Home},
        {path:'/about',component:About},
        {path:'/article',component:Article}
    ]
})

在App.vue中添加如下代码：

<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于</router-link>
<router-link to='/article'>文章</router-link>
<hr />
<router-view></router-view>

完整代码：

index.js代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Article from '@/components/Article.vue'

Vue.use(VueRouter)
const router=new VueRouter({
  routes:[
    {path:'/home',component:Home},
    {path:'/about',component:About},
    {path:'/article',component:Article}
    ]
  })
export default router

main.js代码

app.vue代码：

<div>
  <h1>路由的初步使用</h1>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/article">文章</router-link>
  </div>
  <hr />
  <router-view></router-view>
</div>

2、路由重定向

路由重定向指的是：用户在访问地址A的时候强制用户调转到地址C，从而展示特定的组件页面。

通过路由规则的redirect属性，制定一个新的路由地址可以实现路由重定向。

Vue.use(VueRouter)
//在routees数组中，声明路由的匹配规则
const router=new VueRouter({
  routes:[
    {path:'/',redirect:'/home'},//当用户访问/的时候，通过redirect属性跳转到/home对应的路由规则
    {path:'/home',component:Home},
    {path:'/about',component:About},
    {path:'/article',component:Article}
  ]
})
export default router

3、嵌套路由

通过路由加载的组件中也使用了路由，叫路由嵌套，如下图所示：

使用子路由时，只需要在路由规则配置中找到父组件配置节点，增加children属性即可配置子路由，示例：

    <h2>这是子路由</h2>
    <router-link to="/about/tab1">Tab1</router-link>&nbsp;&nbsp;
    <router-link to="/about/tab2">Tab2</router-link>
    <router-view>
    </router-view>

Vue.use(VueRouter)
//在routees数组中，声明路由的匹配规则
const router=new VueRouter({
    routes:[
        {path:'/',redirect:'/home'},//当用户访问/的时候，通过redirect属性跳转到/home对应的路由规则
        {path:'/yangwei',redirect:'/article'},
        {path:'/home',component:Home},
        {path:'/about',component:About,children:[  //配置子路由
                {path:'tab1',component:Tab1},
                {path:'tab2',component:Tab2}
                ]},
        {path:'/article',component:Article}
    ]
})

如果子路由中的path值为空字符串，则这条子路由规则叫做“默认子路由”

4、动态路由匹配

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。

（1）在vue-router中使用冒号（:）来定义路由的参数项。

（2-1）在路由页面可以通过：（this.$route.params.参数名称）来获取传过来的参数。

//路由规则配置，:articleId为参数
{path:'/article/:articleId',component:Article}

//获取传过来的参数
<template>
  <div class="root">
    这是文章页面,参数值为：{{this.$route.params.articleId}}
  </div>
</template>

（2-2）通过props方式传参

在路由规则配置页面开启props传参数，然后在页面中定义与路由参数名称相同的props，示例：

//路由规则配置，:articleId为参数，并开启props传参
{path:'/article/:articleId',component:Article,props:true}

//获取参数
<template>
  <div class="root">
    这是文章页面,参数值为：{{articleId}}
  </div>
</template>
<script>
  export default {
    props: ['articleId']
  }
</script>

（3）在hash地址中，/后面的参数项叫做“路径参数”，可通过this.$route.params来获取参数数据；?后面的参数项叫做“查询参数”，可通过this.$route.query来获取参数数据。

5、编程式导航

vue-router提供了多种编程式导航的API，其中最常肜的导航API是：

（1）this.$router.push('hash地址')  //跳转到制定的hash地址，并在历史记录中添加一条记录
（2）this.$router.replace('hash地址')//跳转到制定的hash地址，并且提换当页面在浏览历史中的记录
（3）this.$router.go(数值n) //在浏览历史中前进或后退ss

6、导航守卫

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

（1）全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限控制。

const router = new VueRouter({...})
router.beforeEach(function(to,from,next){
    //to是将要访问的路由信息对象
    //from是将要离开的路由信息对象
    //next是一个函数，调用next()表示放行，允许这次路由导航
})
//调用路由实例对象的 beeforeEach方法，即可声明“全局前置守卫”
//每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数”

next函数的3种调用方式：