vue2 路由24 声明式导航 编程式导航 路由守卫

用户点击了页面的路由链接，会导致hash值发生变化，路由监听到hash值的链接发生的变化，会把对应的组件渲染到当前的页面中

 

 

 安装：

直接安装router的话会安装最新版的，最新版仅支持vue3,安装后报错的请检查一下自己的npm版本是否过高

npm i vue-router@3.5.2 -S

index：

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

// 调用vue.use函数，把VueRouter安装为vue插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router =  new VueRouter()

// 向外贡献路由的实例对象
export default router

main：

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios'

import router from './router/index'

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

　　

 

 

正常使用：

app.vue：

首页

// 占位符来的，必须要写

router：
    index.js：
import Vue from  'vue'
import VueRouter from  'vue-router'

import Home from  '@/components/Home.vue'
import Movie from  '@/components/Movie.vue'
import About from  '@/components/About.vue'

import Tab1 from  '@/components/tabs/Tab1.vue'
import Tab2 from  '@/components/tabs/Tab2.vue'
import Ttt1 from  '@/components/tabs/tab/Ttt1.vue'
import Ttt2 from  '@/components/tabs/tab/Ttt2.vue'

// import Login from '@/components/Login.vue'
// import Main from '@/components/Main.vue'
// 调用vue.use函数，把VueRouter安装为vue插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router =  new VueRouter({
    routes: [
        // 重定向地址，强制跳到首页
        { path:  '/' , redirect:  '/home' },
        // 路由规则
        {
            path:  '/home' ,
            component: Home
        },
        {
            path:  '/movie/:mid' ,
            component: Movie,
            props:  true
        },
        {
            path:  '/about' ,
            component: About,
            // 重定向
            redirect:  '/about/tab1' ,
            children: [
                {
                    path:  '' ,
                    component: Tab1
                },
                {
                    path:  'tab2' ,
                    component: Tab2,
                    redirect:  '/about/tab1/ttt1' ,
                    children: [
                        {
                            path:  '' ,
                            component: Ttt1
                        },
                        {
                            path:  'ttt2' ,
                            component: Ttt2
                        }
                    ]
                }
            ]
        }
    ]
})

// 向外贡献路由的实例对象
export default router

Movie 组件 --- {{ $route.params.mid }} --- {{ mid }}

打印 this 后退 back 后退 forward 前进

　　编程式路由

后退页面：
this .$router.go(-1)
或：

　　路由守卫：

　　　　可以控制路由的访问权限

router.beforeEach((to, from, next) => {
    // to是将要访问的路由的信息对象
    // from 是将要离开的路由信息对象
    // next是一个函数，调用next表示放行
})

强制跳转到登录页：

　　路由案例：

　　　　全局前置守卫：

router.beforeEach((to, from, next) => {

    // to是将要访问的路由的信息对象

    // from 是将要离开的路由信息对象

    // next是一个函数，调用next表示放行

    // next('/Login')

    // 分析：

    // 需要先拿到用户的hash地址

    // 判断hash地址是否等于后台主页

    // 如果等于后台主页需要先跳转到login页登录先

    // 如果等于后台主页，则需要读取localStorage中的token值,有token值则放行,没有则跳转到login页

    // 如果不等于后台主页则直接放行

    if (to.path === '/main') {

        const token = localStorage.getItem('token')

        console.log(token)

        if (token) {

            next()

        } else {

            next('/login')

        }

    } else {

        next()

    }

})