Vue路由

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

vue路由的安装和基础配置

安装 vue-router 包

# vue2 项目，要指定版本安装
npm i vue-router@3.5.2

创建路由模块（src/router/index.js）

// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 配置路由规则
const routes = []

// 4. 创建路由的实例对象
const router = new VueRouter({
    /*路由的配置*/
    routes
})

// 5. 导出路由的实例对象
export default router

创建并挂载路由模块（main.js）

// 1. 导入路由模块
import router from '@/router'
new Vue({
  render: h => h(App),
  // 2. 挂载路由模块
  router
}).$mount('#app')

应用

单个

index.js

// 3. 配置路由规则
import MyMusic from '@/views/MyMusic.vue'
import DisCover from '@/views/DisCover.vue'
import Follow from '@/views/Follow.vue'
const routes = [
  { path: '/discover', component: DisCover,children:[
<!-- 二级路由 -->
  { path: 'mymusic', component: MyMusic }
  ] },
  { path: '/mymusic', component: MyMusic },
  { path: '/follow', component: Follow }
]

.vue

<router-link to="/discover">发现音乐</router-link>
设置超链接
<router-view />
设置路由出口（<router-view />）（在哪里展示组件，在哪里放它）

多个

vue

<router-view></router-view>
<router-view name="tabbar"></router-view>

router

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

Vue.use(VueRouter)

// 路由懒加载方式
const Tabbar = () => import('@/components/app-tabbar.vue')
const Home = () => import('@/views/home')
const Question = () => import('@/views/question')
const Video = () => import('@/views/video')
const User = () => import('@/views/user')
const Artcile = () => import('@/views/article')

const routes = [
  // 路由规则
  { path: '/', components: { default: Home, tabbar: Tabbar } },
  { path: '/question', components: { default: Question, tabbar: Tabbar } },
  { path: '/video', components: { default: Video, tabbar: Tabbar } },
  { path: '/user', components: { default: User, tabbar: Tabbar } },
  { path: '/article', component: Artcile }
]

const router = new VueRouter({
  routes
})

export default router

参数传参

1.

<router-link :to="'/discover/gs?id=' + item.id">{{ item.name }}</router-link>

组件中使用 $route.query.参数名 获取值

2.动态路由

1. 超链接挂好合适的参数

<router-link :to="`/discover/phb/${item.name}`">{{ item.name }}</router-link>

1. 路由规则改为 { path: '/xxx/:id', compo... } 或者 { path: '/xxx/:id?', compo... }
2. 跳转后，组件中使用 $route.params.id 获取值
    

重定向

{ path: '/', redirect: '/discover' }

历史模式

index.js

// 4. 创建路由的实例对象
const router = new VueRouter({
    /*路由的配置*/
    routes,
    mode: 'history' // 改为历史模式
})

404处理

{ path: '*', component: () => import('@/views/NotFound.vue') }

高亮

app.vue
.router-link-active {
  color: red !important;
}
.vue
 a.router-link-exact-active {
      color: red !important;
    }

编程式导航

通过调用API方式实现导航的方式，叫做编程式导航。比如之前：

• location.href = 'xxxxx' // 使用API方法跳转页面
• history.go(-1) // 使用API方法后退

在vue-router中，也有类似的功能。

this.$router.方法名()

this.$router.back() ---- 后退
this.$router.forward() ---- 前进
this.$router.go(n) ---- 前进或后退  go(1)前进一次   go(-1)后退一次

this.$router.push() ---- 跳转到指定的一个地址，并添加一条历史记录
this.$router.replace() ---- 跳转到指定的一个地址，只替换当前地址，并不会增加历史记录

• $router.push() 跳转到指定 hash 地址，并增加一条历史记录

// 写法一：对象格式，用 path 进行跳转
this.$router.push({
	  path: '完整路由地址',
      query: {
        参数: '值',
        参数: '值'    // query参数会拼接成  /xxxxx?参数=值&参数=值
      },
      // params: {
      //   参数: '值',
      //   参数: '值'
      // }, // 有问题，不用。参数不能拼接到url后面
})

// 写法二：对象格式，用 name 进行跳转
this.$router.push({
	  name: '路由的name值',
      query: {
        参数: '值',
        参数: '值'       // /xxxxx?参数=值&参数=值
      },
      params: {
        参数: '值',
        参数: '值'
      }, // 参数会拼到url后面    /xxxxx/3/绿皮书
})

// 写法三：直接写字符串
this.$router.push('完整路由地址')
this.$router.push('/sport?id=4&name=英格兰对法国')
this.$router.push('/movie/3/绿皮书')

导航守卫

// 必须在创建router之后，导出之前，加入全局前置导航守卫
router.beforeEach((to, from, next) => {
  // console.log(to) // to.path 表示跳转的路由地址
  // next()
  if (to.path === '/login' || to.path === '/register') {
    next()
  } else {
    // 访问面经列表页、详情页、收藏页......，还需要判断是否有token
    if (localStorage.getItem('mobile-token')) {
      next()
    } else {
      next('/login')
    }
  }
})


// // 允许访问的列表
// const allow = ['/login', '/register', '/xxx', '/yyyy']
// // 添加全局前置导航守卫
// router.beforeEach((to, from, next) => {
//   if (allow.includes(to.path)) {
//     next()
//   } else {
//     // 说明访问的不是登录、不是注册，还要判断本地存储是否有token
//     if (localStorage.getItem('mobile-token')) {
//       next()
//     } else {
//       next('/login')
//     }
//   }
// })