路由基础使用

# route路由基础

# 下载路由插件

npm i vue-router

# main.js中引入路由插件

import VueRouter from "vue-router"//引入Router插件
import router from "./router/index"//引入路由规则
Vue.use(VueRouter)//使用Router插件

1
2
3

# 书写路由规则（路由器）

//vue2 版本
import VueRouter from "vue-router";
//其中About.vue和Home.vue分别是两个路由组件 
import About from "../views/About.vue" 
import Home from "../views/Home.vue" 
//创建并暴露一个路由器
export default new VueRouter({
 routes: [
        {//一路径对应一组件
 			path: '/About',
 			component: About,
            //重定向，如果在About路由，默认路由展示Home路由
            //redirect: "/Home",
            //取路由别名，但访问的还是同一个路由
            alias:['/about1','/about2','/about3']
        },
        {
 			path: '/Home',
 			component: Home
        },
    ]
})

//vue3-ts 版本
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("@/components/home.vue"),
  },
  {
    path: "/about",
    component: () => import("@/components/About.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),//hash模式
  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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 路由模式

vue 路由中一共有两种模式：

history 模式：

监听 history 提供了的 popstate 事件，其默认参数中的 state 可以获取当前路径以及返回的路径。
```
window.addEventListener('popstate',e=>{console.log(e)})
```
1
利用 H5 的 history 来实现，history 提供了 pushState 和 replaceState 两种方法，但这两种方法改变 URL 的 path 部分并不会引起页面刷新。
```
history.pushState({[state:1],'','/path1'}) //可以传递参数：要传的内容；title属性；路径；
```
1
此外通过 js 调用 back、forward、go可以触发 popstate 事件，且提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会向后端发送请求。
hash 模式：监听 window hashchange 来实现,默认参数中的 newURL 和 oldURL 可以获取历史信息。
```
window.addEventListener('hashchange',e=>{console.log(e)})
```
1
url中带了一个 # 号。hash 可以改变URL，但不会触发页面重新加载,即有页面缓存,也有弊端，即不利于 SEO 优化。

# 在页面中使用路由

<template>
 <!-- router语法，跳转的a标签要改为route-link，路径用to中,其中的./一类的去掉. -->
 <!-- active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换； -->
 <router-link class="list-group-item" active-class="active" to="/About">About</router-link>
 <!-- route-link的replace属性-->
 <router-link replace class="list-group-item" active-class="active" to="/Home">Home</router-link>
 <!-- 路由器视图，即指定组件的呈现位置 -->
 <router-view></router-view>
 <!-- 命名路由器视图-->
 <router-view name='header'></router-view>
 <router-view name='context'></router-view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12

# route-link的replace属性

作用：控制路由跳转的浏览器历史记录操作历史记录默认为push模式即会追加历史记录，添加了replace后该路由下的所有跳转都会变成替代模式即该路由下的操作无法进行后退前进操作

 <!-- route-link的replace属性-->
 <router-link replace class="list-group-item" active-class="active" to="/Home">Home</router-link>

//如果是编程式路由导航，直接将 push 替换成 replace
router.replace(url)

1
2
3
4
5

注意点：

1.路由组件一般放在views文件里而一般组件通常放在components文件里面 2.通过切换隐藏了的组件默认是被销毁的，需要的时候再去挂载 3.每个组件都有一个自己的$route属性，里面储存着自己的路由信息 4.整个应用只有一个router，可以通过组件的$router属性获取到

编辑

上次更新: 2023/7/11 18:57:41

← 路由懒加载编程式路由导航→