Vue-router的使用

vue-router的安装和配置的步骤

1、 安装vue-router包

 npm i vue-router@3.5.2  -S

2、 创建路由模块

在src项目下创建router/index.js路由模块，并初始化如下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

//调用Vue.use()函数，把VueRouter安装为Vue插件
Vue.use(VueRouter)
//创建路由实例对象
const router = new VueRouter()
//向外部共享路由的实列对象
export default router

3、 导入并挂载模块

在main.js模块中导入并挂载

import router from './router'

new Vue({
  //渲染组件
  render: h => h(App),
  //引用路由
  router
  //.$mount是es6的写法，相当于el：‘#app’
}).$mount('#app')

4、 声明路由链接和占位符

为了方便，创建App2.vue组件，并书写以下代码：

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- 可以用 router-link替代a链接 -->
    <router-link to="/home">首页</router-link>
    <br>
    <router-link to="/movie">电影</router-link>
    <br>
    <router-link to="/about">关于</router-link>
    <br>
    <hr/>
    <!-- 占位符，为横线下的组件占位 -->
    <router-view></router-view>
  </div>
</template>

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

<style scoped>

</style>

然后在compoments目录下创建三个组件，用于跳转

5、声明路由规则

在router/index.js声明，全部代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/components/Home"
import About from "@/components/About"
import Movie from "@/components/Movie";
//调用Vue.use()函数，把VueRouter安装为Vue插件
Vue.use(VueRouter)
//创建路由实例对象
const router = new VueRouter({
    //routes是一个数组，作用：定义hash地址与组件之间的对应关系
    routes:[
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/movie',component:Movie},
    ]
})
//向外部共享路由的实列对象
export default router

这样就完成了路由的入门

路由的基本用法

1.重定向

用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向。

 routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/movie',component:Movie},
    ]

2.嵌套路由

给About组件里嵌套路由
About.vue代码如下：

<template>
    <div >
        <h1>这是about页面</h1>
        <!-- 子级路由链接 -->
        <router-link to="/about/left">left</router-link><br>
        <router-link to="/about/right">right</router-link>
        <hr/> 
        <!-- 子级路由占位符 -->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name:'About'
}
</script>

<style>
    
</style>

去index.js声明路由对应规则：

{
            path: '/about', component: About, children: [
                //子路由路径前不加‘/’
                {path: 'left', component: Left},
                {path: 'right', component: Right},
            ]
 }

这样就完成了嵌套路由

小知识:默认子路由

给about加重定向

{
            path: '/about',
            component: About,
            redirect:'/about/left',
            children: [
                //子路由路径前不加‘/’
                {path: 'left', component: Left},
                {path: 'right', component: Right}
            ]
}

在children数组中，如果某个路由规则的path值为空字符串，则这条路由规则，叫做默认子路由，故上述代码可改为：

{
            path: '/about',
            component: About,
            children: [
                //子路由路径前不加‘/’
                {path: '', component: Left},
                {path: 'right', component: Right}
            ]
}

路由之导航守卫

1.导航守卫的创建

导航守卫类似于Servlet中的Filter过滤器。
在index.js目录下创建代码如下：

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

2.next函数的三种调用方式

3.使用

router.beforeEach(function (to, from, next) {
    //to 是将要访问的路由信息对象
    //from是将要离开的路由的信息对象
    //next是一个函数，调用next()表示放行，允许这次路由导航
    //1.拿到用户将要访问的hash地址
    //2.判断hash地址是否等于/main,如果是，则要登陆后放行，如果不是，则放行
    //3.如果访问的地址是/main。则需要读取localStorage中的token值,如果有token，则放行，如果没有token，则强制跳转到/login

    if (to.path === '/main') {
        const token = localStorage.getItem('token')

        if (token) {
            next();
        } else {
            next('/login')
        }
    } else {
        next();
    }
})