vue-router 的基本使用

vue-router 的基本使用

1. 什么是 vue-router

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

vue-router 的官方文档地址：https://router.vuejs.org/zh/

2. vue-router 安装和配置的步骤

① 安装 vue-router 包
② 创建路由模块
③ 导入并挂载路由模块
④ 声明路由链接和占位符

2.1 在项目中安装 vue-router

在 vue2 的项目中，安装 vue-router 的命令如下：

2.2 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

import Vue from 'vue' import VueRouter from 'vue-router' import pathArr from '@/router/pathArr.js'// 导入需要的组件 import Login from '@/components/MyLogin.vue' import Home from '@/components/MyHome.vue'import Users from '@/components/menus/MyUsers.vue' import Rights from '@/components/menus/MyRights.vue' import Goods from '@/components/menus/MyGoods.vue' import Orders from '@/components/menus/MyOrders.vue' import Settings from '@/components/menus/MySettings.vue' import UserDetail from '@/components/user/MyUserDetail.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/', redirect: '/login' },// 登录的路由规则{ path: '/login', component: Login },// 后台主页的路由规则{path: '/home',component: Home,redirect: '/home/users',children: [{ path: 'users', component: Users },{ path: 'rights', component: Rights },{ path: 'goods', component: Goods },{ path: 'orders', component: Orders },{ path: 'settings', component: Settings },// 用户详情页的路由规则{ path: 'userinfo/:id', component: UserDetail, props: true }]}] })// 全局前置守卫 router.beforeEach(function(to, from, next) {if (pathArr.indexOf(to.path) !== -1) {const token = localStorage.getItem('token')if (token) {next()} else {next('/login')}} else {next()} })export default router

2.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

官网挂在路由模块介绍：

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' }// 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar } ]// 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({routes // (缩写) 相当于 routes: routes })// 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({router }).$mount('#app')// 现在，应用已经启动了！

实际开发中：

import Vue from 'vue' import App from './App.vue' // 导入路由模块，目的：拿到路由的实例对象 // 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件 //相当于import router from '@/router/index.js' //下面的这种写法，程序会自动导入相应的index.js文件 import router from '@/router'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载// router: 路由的实例对象//下面是简写的方式，相当于： router:router//当key和value的值相同的时候就可以使用简写的方式router }).$mount('#app')

2.4 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的router-link标签和 router-view标签声明路由链接和占位符：

官网中声明路由链接和占位符：
实际开发中：

<template><div class="app-container"><h1>App2 组件</h1><!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 --><!-- <a href="#/home">首页</a> --><router-link to="/home">首页</router-link><!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参数” --><!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 --><!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” --><!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 --><!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 --><!-- 例如： --><!-- /movie/2?name=zs&age=20 是 fullPath 的值 --><!-- /movie/2 是 path 的值 --><router-link to="/movie/1">洛基</router-link><router-link to="/movie/2?name=zs&age=20">雷神</router-link><router-link to="/movie/3">复联</router-link><router-link to="/about">关于</router-link><hr /><!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 --><!-- 它的作用很单纯：占位符 --><router-view></router-view></div> </template><script> export default {name: 'App' } </script><style lang="less" scoped> .app-container {background-color: #efefef;overflow: hidden;margin: 10px;padding: 15px;> a {margin-right: 10px;} } </style>

router-link相当于a标签，触发需要加载的页面，需要加载的页面被触发之后，会自动加载到router-view标签中显示。

3. 声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下：

实际开发中：

// 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/tabs/Tab1.vue' import Tab2 from '@/components/tabs/Tab2.vue'import Login from '@/components/Login.vue' import Main from '@/components/Main.vue'// 把 VueRouter 安装为 Vue 项目的插件 // Vue.use() 函数的作用，就是来安装插件的 Vue.use(VueRouter)// 创建路由的实例对象 const router = new VueRouter({// routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系routes: [// 重定向的路由规则{ path: '/', redirect: '/home' },// 路由规则{ path: '/home', component: Home },// 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息// 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值{ path: '/movie/:mid', component: Movie, props: true },{path: '/about',component: About,// redirect: '/about/tab1',children: [// 子路由规则// 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”{ path: '', component: Tab1 },{ path: 'tab2', component: Tab2 }]},{ path: '/login', component: Login },{ path: '/main', component: Main }] })// 为 router 实例对象，声明全局前置导航守卫 // 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数 router.beforeEach(function(to, from, next) {// to 表示将要访问的路由的信息对象// from 表示将要离开的路由的信息对象// next() 函数表示放行的意思// 分析：// 1. 要拿到用户将要访问的 hash 地址// 2. 判断 hash 地址是否等于 /main。// 2.1 如果等于 /main，证明需要登录之后，才能访问成功// 2.2 如果不等于 /main，则不需要登录，直接放行 next()// 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值// 3.1 如果有 token，则放行// 3.2 如果没有 token，则强制跳转到 /login 登录页if (to.path === '/main') {// 要访问后台主页，需要判断是否有 tokenconst token = localStorage.getItem('token')if (token) {next()} else {// 没有登录，强制跳转到登录页next('/login')}} else {next()} })export default router

总结

以上是生活随笔为你收集整理的vue-router 的基本使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。