VueRouter前端路由

文章目录

VueRouter前端路由
前言

前言

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

基本使用

定义组件

js 复制代码

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

<script>
export default {

}
</script>

创建路由器实例

定义一组路由，把 URL 路径映射到组件

js 复制代码

import Vue from 'vue'
import Router from 'vue-router'
import Discover from '@/components/music/Discover'
import Friends from '@/components/music/Friends'
import Toplist from '@/components/music/Toplist'
import Playlist from '@/components/music/Playlist'
import My from '@/components/music/My'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Discover',
      name: 'Discover',
      component: Discover
    },
    {
      path: '/Friends',
      name: 'Friends',
      component: Friends
    },
    {
      path: '/My',
      name: 'My',
      component: My
    }
  ]
})

注册路由器插件

js 复制代码

import router from './router'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  router,
  components: { App, ElementUI },
  template: '<App/>'
})

访问注册的路由组件

在app.vue中设置

js 复制代码

<template>
  <div id="app">
    <!-- 声明路由链接 -->
    <router-link to="/Discover">发现音乐</router-link>
    <router-link to="/Friends">关注</router-link>
    <router-link to="/My">我的音乐</router-link>
    <!-- 声明路由占位标签 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
    }
  }
}
</script>

实现效果

路由重定向

路由重定向指的是:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面。

通过路由规则的redirect属性,指定一个新的路由地址,可以很方便地设置路由的重定向:

js 复制代码

const router = new VueRouter({
//指定hash属性与组件的对应关系
routes:[
//当用户访问/时,跳转到/discover
{path:'/', redirect:'/Discover'},
{path:'/Discover',name: 'Discover',component:Discover},
{path:'/Friends',name: 'Friends',component:Friends},
{path:'/My',name: 'My',component:My},

路由嵌套

在app.vue中的 <router-view> 是一个顶层的 router-view。它渲染顶层路由匹配的组件。同样地，一个被渲染的组件也可以包含自己嵌套的

在注册的组件Discover中嵌套一层路由

js 复制代码

<template>
  <div>
    <h1>发现音乐</h1>
    <!-- 嵌套路由 -->
    <router-link to="/Discover/toplist">推荐</router-link>
    <router-link to="/Discover/playlist">歌单</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

修改路由器实例

children 配置只是另一个路由数组，就像 routes 本身一样。因此，可以根据自己的需要，不断地嵌套视图

js 复制代码

export default new Router({
  routes: [
	{
	  path: '/Discover',
	  name: 'Discover',
 	 component: Discover,
 	 children: [
 	   {path: 'toplist',
      name: 'toplist',
      component: Toplist},
    {path: 'playlist',
      name: 'playlist',
      component: Playlist}
  ]
},
...

动态路由

动态路由指的是:把Hash地址中可变的部分定义为参数项,从而提高路由规则的复用性。在vue-router中使用英文的冒号(:)来定义

路由的参数项。示例代码如下:

js 复制代码

{path:'/product/:id',component:Product }

通过动态路由匹配的方式渲染出来的组件中,可以使用$route.params对象访问到动态匹配的参数值

js 复制代码

<template>
  <div>
    <h1>商品</h1>
    <h2>{{$route.params.id}}</h2>
  </div>
</template>

<script>
export default {

}
</script>

实现效果

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

在组件中定义属性

bash 复制代码

<template>
  <div>
    <h1>商品</h1>
    <h2>{{id}}</h2>
  </div>
</template>

<script>
export default {
// 组件名称
  name: 'Product',
  props: ['id']
}
</script>

声明式	编程式
<router-link :to="...">	router.push(...)

除了使用创建a标签来定义导航链接,还可以借助router的实例方法,通过编写代码来实现。想要导航到不同的URL,则使用router.push方法。这个方法会向history找添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。当点击时,这个方法会在内部调用,所以说,点击router-link:to="..."等同于调用 router.push(...)。

导航守卫

vue-router提供的导航守卫主要用来拦截导航，让它完成跳转或取消。可以控制路由的访问权限。

全局导航守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制。

可以使用router.beforeEach注册一个全局前置守卫:

js 复制代码

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

to:即将要进入的目标
from:当前导航正要离开的路由

在守卫方法中如果声明了next形参,则必须调用next()函数,否则则不允许用户访问任何一个路由!
next():直接放行
next(false):强制其停留在当前页面
next('/login'):强制具跳转到登录页面