Vue中的路由使用

Vue2中的路由

一、router在项目中使用

1.下载vue-router

 npm install vue-router --save
1

2.在src目录下创建router文件并在router下index.js文件

//router文件夹 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.在man.js中通过 router 配置参数注入路由

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

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9

3.在App.vue根组件中

<template>
  <router-view></router-view>
</template>
1
2
3

完成以上步骤就可以通过在 router/index.js 中配置的路由访问页面了

router-view

路由出口
路由匹配到的组件将渲染在 处

使用 router-link 组件来导航

1. 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active
2. 通过传入 to 属性指定链接
3. 默认会被渲染成一个 标签
4. 其它属性请参照官网 https://v3.router.vuejs.org/zh/api/#to

  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
1
2
3
4
5
6
7

this.$route

当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

//路由部分代码
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
    //   /user/1   user/2 等路径都会被识别
  ]
})
1
2
3
4
5
6
7
8

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params
/user/:id 路径中的id的值可通过this.$route.params.id获取

$route常用属性

$route.path

类型: string
字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。

$route.params

类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

$route.query

类型: Object
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

$route.hash

类型: string
当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

$route.name

当前路由的名称，如果有的话。(查看命名路由)

$route.redirectedFrom

如果存在重定向，即为重定向来源的路由的名字。(参阅重定向和别名)

this.$router

router 实例。
我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。

编程式的导航

router.push

router.push(location, onComplete?, onAbort?)
1

router.push(...)与<router-link :to="...">实现效果一致
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
1
2
3
4
5
6
7
8
9
10
11
12

带有path属性，param属性就不会生效

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
1
2
3
4
5

router.replace

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.replace(location, onComplete?, onAbort?)

//和router.replace(...)
1
2
3

router.replace

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
1
2
3
4
5
6
7
8
9
10
11
12

Vue中的路由守卫

https://blog.csdn.net/qq_38367703/article/details/126842275?spm=1001.2014.3001.5501

Vue3中的路由

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = []

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
1
2
3
4
5
6
7
8
9
10

Vue3更强调模块化 注重按需引入，所有使用vue-router就需要先导入，然后创建router实例

 import { useRouter } from "vue-router"
 const router = useRouter()
 router.push('/home')
1
2
3