Vue学习碎片之路由VueRouter

VueRouter安装

• Vue路由vue-router是官方的路由插件，能够轻松的管理SPA项目中组件的切换
• Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来
• vue-router目前有3.x版本和4.x版本，vue-router 3.x只能结合vue2进行使用，vue-router 4.x只能结合vue3进行使用
• 安装：npm install vue-router@3或4

路由使用

以网易云音乐为例
app.vue：

<template>
  <div id="app">
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friends">关注</router-link>
    <router-view></router-view>
  </div>
</template>

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

router文件夹下的index.js：

import VueRouter from "vue-router";
import Vue from "vue";
import DiscoverPage from "@/components/DiscoverPage.vue";
import FriendsPage from "@/components/FriendsPage.vue";
import MyMusic from "@/components/MyMusic.vue";
import TopList from "@/components/TopList.vue";
import PlayList from "@/components/PlayList.vue";
Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {path:'/', redirect:"/discover"},
        {path:'/discover', 
        component:DiscoverPage,
        children:[
            {path:'toplist', component:TopList},
            {path:'playlist', component:PlayList},
        ]
    },
        {path:'/friends', component:FriendsPage},
        {path:'/my', component:MyMusic},
    ]
})

export default router

components文件夹下的组件：
DiscoverPage.vue：

<template>
    <div>
        <h1>发现音乐</h1>
        <router-link to="/discover/toplist">推荐</router-link>
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>

FriendsPage.vue：

<template>
    <div>
        <h1>关注</h1>
    </div>
</template>

MyMusic.vue：

<template>
    <div>
        <h1>我的音乐</h1>
    </div>
</template>

TopList.vue：

<template>
    <h3>推荐</h3>
</template>

PalyList.vue：

<template>
    <h3>歌单</h3>
</template>

页面显示如下

动态路由

MyMusic.vue：

<template>
    <div>
        <h1>我的音乐</h1>
        <router-link to="/my/1">商品1</router-link>
        <router-link to="/my/2">商品2</router-link>
        <router-link to="/my/3">商品3</router-link>
        <router-view></router-view>
    </div>
</template>

router文件夹下的index.js：

import VueRouter from "vue-router";
import Vue from "vue";
import DiscoverPage from "@/components/DiscoverPage.vue";
import FriendsPage from "@/components/FriendsPage.vue";
import MyMusic from "@/components/MyMusic.vue";
import TopList from "@/components/TopList.vue";
import PlayList from "@/components/PlayList.vue";
import ProductPage from "@/components/ProductPage.vue";
Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {path:'/', redirect:"/discover"},
        {path:'/discover', 
        component:DiscoverPage,
        children:[
            {path:'toplist', component:TopList},
            {path:'playlist', component:PlayList},
        ]
    },
        {path:'/friends', component:FriendsPage},
        {path:'/my', 
        component:MyMusic,
        children:[
            {path:':id', component:ProductPage},
        ]
    },
    ]
})

export default router

components文件夹下的ProductPage.vue：

<template>
<h3>商品{{ $route.params.id }}</h3>
</template>

以属性的方式获取路由参数

为了简化路由参数的获取形式，vue-router允许在路由规则中开启props传参。示例代码如下

{ path: '/product/:id', component: ProductPage, props: true }

ProductPage.vue：

<template>
<h3>商品{{ id }}</h3>
</template>

<script>
export default {
    props:["id"]
}
</script>

路由守卫

路由守卫可以控制路由的访问权限，全局路由守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。
你可以使用router.beforEach注册一个全局前置守卫：

router.beforEach((to, from, next) => {
	if(to.path === '/main' && !isAuthenticated){
		next('/login')
	}
	else{
		next()
	}
})

• to：即将要进入的目标
• from：当前导航正要离开的路由
• 在守卫方法中如果声明了next形参，则必须调用next()函数，否则不允许用户访问任何一个路由！
• 直接放行：next()
• 强制其停留在当前页面：next(false)
• 强制其跳转到登录页面：next(‘/login’)