Vue2-集成路由Vue Router介绍与使用

更多相关内容可查看

路由（Vue2）

1. SPA 与前端路由

路由是根据不同的url地址来显示不同的页面或内容的功能，这个概念很早是由后端提出的，既浏览器向
不同的地址发送请求，后端返回相应的内容。

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面
内完成。此时，不同组件之间的切换需要通过前端路由来实现。

前端路由通常是通过监听URL hash属性值的变化，切换页面，hash 属性是一个 可读可写的字符串 ，该字
符串是 URL 的锚部分（从 # 号开始的部分）。

前端路由的工作方式

• 前端路由，指的是 Hash 地址与组件之间的对应关系。
• 用户点击了页面上的路由链接
• 导致了 URL 地址栏中的 Hash 值发生了变化
• 前端路由监听了到 Hash 地址的变化
• 前端路由把当前 Hash 地址对应的组件渲染到浏览器中

2. vue-router基本使用

vue-router 是vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
vue-router 目前有 3.x 的版本和 4.x 的版本。其中：

• vue-router 3.x 只能结合 vue2 进行使用
• vue-router 4.x 只能结合 vue3 进行使用

官方文档：https://router.vuejs.org/zh/installation.html vue-router

vue-router的基本使用步骤：

• 在项目中安装 vue-router

• 定义路由组件

• 声明路由链接和占位符

• 创建路由模块

• 导入并挂载路由模块

vue-router安装

npm install vue-router@

创建路由组件

在项目中定义 Discover.vue、 Friends.vue、 My.vue 三个组件，将来要使用 vue-router 来控制它们的 展示与切换：

Discover.vue：

<template>
  <div>
    <h1>发现音乐</h1>
  </div>
</template>

Friends.vue：

<template>
  <div>
    <h1>发现音乐</h1>
  </div>
</template>

My.vue：

<template>
  <div>
    <h1>发现音乐</h1>
  </div>
</template>

声明路由链接和占位标签

可以使用 标签来声明路由链接，并使用 标签来声明路由占位符。示例 代码如下：
App.vue：

<template>
<div>
<h1>APP组件</h1>
<!-- 声明路由链接 -->
<router-link to="/discover">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">关注</router-link>
<!-- 声明路由占位标签 -->
<router-view></router-view>
</div>
</template>

创建路由模块

在项目中创建 index.js 路由模块，加入以下代码：

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from "@/components/Discover.vue";
import Friends from "@/components/Friends.vue";
import My from "@/components/My.vue";
//将VueRouter设置为Vue的插件
Vue.use(VueRouter);

const router = new VueRouter({
  // 指定hash属性与组件的对应关系
  routes: [
    { path: '/', redirect: '/discover'},
    { path: "/discover", component: Discover },
    { path: "/friends", component: Friends },
    { path: "/my", component: My },
  ],
});
export default router;

挂载路由模块

在main.js中导入并挂载router

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

Vue.config.productionTip = false

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

3. vue-router进阶

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

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

嵌套路由

在 Discover.vue组件中，声明 toplist和 playlist的子路由链接以及子路由占位符。示例代码如下：

<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>

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：

const router = new VueRouter({
// 指定hash属性与组件的对应关系
	routes: [
	{ path: '/', redirect: '/discover'}, {
	path: '/discover',
	component: Discover,
	// 通过children属性，嵌套声明子路由
	children: [
	{path:"toplist",component:TopList},
	{path:"playlist",component:PlayList}, ]
	
	},
	{ path: '/friends', component: Friends }, { path: '/my', component: My },
] })

动态路由

假如有如下 3 个路由链接：

<router-link	to="/product/1">商品1</router-link>
<router-link	to="/product/2">商品2</router-link>
<router-link	to="/product/3">商品3</router-link>

const router = new VueRouter({
// 指定hash属性与组件的对应关系
	routes: [
	{ path: '/product/1', component: Product }, 
	{ path: '/product/2', component: Product }, 
	{ path: '/product/3', component: Product },
	] })

上述方式复用性非常差。

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue- router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：

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

通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params对象访问到动态匹配的参数值， 比如在商品详情组件的内部，根据id值，请求不同的商品数据。

<template>
	<h1>Product组件</h1>
	<!-- 获取动态的id值 -->
	<p>{{$route.params.id}}</p> 
</template>
	
<script>
	export default {
	//   组件的名称
	name: 'Product' }
</script>

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

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

<template>
	<h1>Product组件</h1>
	<!-- 获取动态的id值 -->
	<p>{{id}}</p> 
</template>

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

编程式导航

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

<template>
<button @click="gotoProduct(2)">跳转到商品2</button> </template>

<script>
export default { methods:{
gotoProduct: function(id){
this.$router.push('/movie/${id}') }
} }
</script>

导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

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

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

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

• to : 即将要进入的目标

• from : 当前导航正要离开的路由

• 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路
  由！

  • 直接放行：next()

  • 强制其停留在当前页面：next(false)

  • 强制其跳转到登录页面：next(’/login’)

本篇小结

路由就是页面跳转，无论是通过按钮或者点击事件、图片等等都可以对应实现，用过vue3的朋友会发现其实跟vue2道理一样，细枝末节的处理可能稍有差异，还有更为复杂的场景路由，更详细全面的内容可查看官方文档