vue的路由使用

在 SPA (单页应用程序)项目中，不同功能之间的切换，要依赖于前端路由来完成

前端路由：Hash 地址与组件之间的对应关系。

①用户点击了页面上的路由链接

②导致URL地址栏中的Hash值发生了变化

③前端路由监听到了Hash地址的变化

④前端路由把当前Hash地址对应的组件渲染到浏览器中

 

 安装

        npm i vue-router

使用

         创建路由模块。 在 src 源代码目录下，新建 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/Tab1.vue'
import Tab2 from '@/components/Tab2.vue'


//安装VueRouter插件
Vue.use(VueRouter)

//创建路由实例对象
const router = new VueRouter(
    //在routers数组中，声明路由的匹配规则
    routers:[
        //redirect 路由重定向
        //当哈希地址为 '/'的时候，让路由规则匹配到哈希地址为 '/home'的对应规则
        {path:'/',redirect:'/home'}

        //path 表示要匹配的哈希地址 ， component 表示要展示的路由组件
        {path:'/home', component: Home},
        
        {path:'/movie', component: Movie},
        
        {path:'/about', 
         component: About，
        
         //使用children，嵌套声明子级路由
         children:[
                //当哈希地址为 #/about/tab1 时，使用 Tab1组件
                {path:'tab1', component: Tab1},
        
                {path:'tab2', component: Tab2},
            ]
        }
    ]
)

//导出
export default router

        在 src/main.js 入口文件中，导入并挂载路由模块。

import Vue from 'vue'
import APP from './APP.vue'

//导入路由模块
import router from '@/router/index.js'

new Vue({
//挂载路由
router,
render: h=> h(app)

}).$mount('#app')

        声明路由链接和占位符

<template>

    //<router-link> </router-link> 标签相当于一个a链接
    //to 给路由传递某一页面的哈希地址
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

    //<router-view>是一个路由占位符，由路由匹配规则根据to传递的哈希地址规定哪个组件会出现在该位置
    <router-view></router-view>

</template>

        动态路由

                把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。 在 vue-router 中使用英文的冒号（:）来定义路由的参数项。

<router-link to="/movie/1">电影1</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影3</router-link>



{path:'/movie/:xxx', component: Movie},

        this.$route 路由参数对象

                其中 this.$route.params.xxx  可以获取到动态匹配的参数值

                【注】动态匹配的参数值还可以通过props来获取到

                        在index.js中

//开启以 props 的形式接收动态路由的数值
{path:'/movie/:xxx', component: Movie, props: true},

                        在组件中设置

export default {
    //props中接收动态路由数值的变量名必须和路由匹配规则中 :后的变量名一致
    props: ['xxx']
}

          this.$router 

                this.$router.push('hash 地址') 

                        跳转到指定 hash 地址，并增加一条历史记录

                this.$router.replace('hash 地址')

                         跳转到指定的 hash 地址，并替换掉当前的历史记录

                this.$router.go(数值 n)

                        实现导航历史前进、后退

                $router.back()

                        在历史记录中，后退到上一个页面

                $router.forward()

                        在历史记录中，前进到下一个页面

        导航守卫

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

                在 index.js 中

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

Vue.use(VueRouter)

const router = new VueRouter()

//每次发生路由的导航跳转时，都会触发全局前置守卫
//to 是将要访问的路由信息对象，to.path 表示将要访问的路由路径
//from 是将要离开的路由信息对象
//next 是一个函数，只有调用了 next() 这个函数，才会允许这次路由导航
router.beforeEeach((to,from,next) => {
    
})