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

标签：24 vue next components import router 导航 路由

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

 

 

 安装：

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

npm i [email protected] -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-link to="/Home">首页</router-link>

// 占位符来的，必须要写
<router-view></router-view>

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

<template>
  <div class="movie-container">
    <!-- this.$route 是路由的“参数对象” -->
    <!-- this.$router 是路由的“导航对象” -->
    <h3>Movie 组件 --- {{ $route.params.mid }} --- {{ mid }}</h3>
    <button @click="showThis">打印 this</button>
    <button @click="goback">后退</button>
    <!-- 在行内使用编程式导航跳转的时候，this 必须要省略，否则会报错！ -->
    <button @click="$router.back()">back 后退</button>
    <button @click="$router.forward()">forward 前进</button>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  // 接收 props 数据
  props: ['mid'],
  methods: {
    showThis() {
      console.log(this)
    },
    goback() {
      // go(-1) 表示后退一层
      // 如果后退的层数超过上限，则原地不动
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.movie-container {
  min-height: 200px;
  background-color: lightsalmon;
  padding: 15px;
}
</style>

　　编程式路由

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

   @click="$router.back()"

前进页面：
this.$router.go(1)
或：

    @click="$router.forward()"

　　路由守卫：

　　　　可以控制路由的访问权限

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

强制跳转到登录页：

    next('/Login')  　强制停留在本主页：     next('false')

　　路由案例：

　　　　全局前置守卫：

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()     } })

　　　　

 

标签：24,vue,next,components,import,router,导航,路由
From： https://www.cnblogs.com/wencaiguagua/p/16985296.html