Vue-router的安装使用

一.基本路由

1.基本使用

1. 安装vue-router,命令,因为现在默认是最新版本,且只支持vue3,所以vue2使用需要指定版本安装

npm i vue-router@3

2. 在src目录下创建router文件夹,然后创建index.js文件来编写router配置项

//该文件专门用于创建整个应用的路由实例对象
import VueRouter from "vue-router";
//引入组件
import About from "@/components/About";
import Home from "@/components/Home";
//创建并暴露一个路由实例对象
export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
    },
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 在main.js文件中 导入并应用插件:

.....
//引入vue-router插件
import VueRouter from "vue-router";
// 引入路由实例对象
import router from "@/router";
//应用插件
Vue.use(VueRouter);
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
  router,//注册路由实例对象
}).$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12

4. 实现切换(active-ckass可配置高亮样式)

<router-link active-class=“active” to = “/home”>Home
roter-link是使用标签,to是跳转地址

5. 指定展示位置

<router-view>

2.几个注意点

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

二.嵌套(多级)路由

1. 配置路由规则,使用 children 配置项:

  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [//通过children配置子级路由
        {
          path: "news",//此处一定不要写:/news
          component: News,
        },
        {
          path: "messages",//此处一定不要写:/messages
          component: Messages,
        },
      ],
    },
  ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 跳转(要写完整路径):

// 路径要带着父级路径
 <router-link active-class="active" to="/home/news">NEWSrouter-link>
1
2

三.路由的query参数

1. 传递参数

<!-- 跳转路由并携带query参数,to的字符串写法-->
<router-link :to="`/home/messages/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>
<!-- 跳转路由并携带query参数,to的对象写法(推荐)-->
<router-link :to="{
  path:'/home/messages/detail',
  query:{
    id:m.id,
    title:m.title
          }
}">{{ m.title }}</router-link>
1
2
3
4
5
6
7
8
9
10

2. 接收参数

$route.query.id
$route.query.title
1
2

四.路由的params参数

1.配置路由,声明接收params参数

   {
      path: "/home",
      component: Home,
      children: [
        {
          path: "news",
          component: News,
        },
        {
          path: "messages",
          component: Messages,
          children: [
            {
              name: "xiangqing",
              path: "detail/:id/:title", //使用占位符声明接收params
              component: Detail,
            },
          ],
        },
      ],
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.传递参数

 
    <router-link :to="`/home/messages/detail/${m.id}/${m.title}`">
  		  {{ m.title }}
    router-link>
 
   <router-link :to="{
          name:'xiangqing',//只能用name不能用path路径写法
          params:{
            id:m.id,
            title:m.title
          }
        }">
          {{ m.title }}
  router-link>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14

特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path的路径写法配置,必须使用name配置!

3.接收参数

$route.parmams.id
$route.params.title
1
2

五.命名路由

1.作用:简化路由的跳转

2.使用方法:

1. 给路由命名

routes: [
    {
      name: "guanyu",//给路由命名
      path: "/about",
      component: About,
    },]
1
2
3
4
5
6

2. 简化跳转:

//简化前
<router-link to="/about">Aboutrouter-link>
//简化后
<router-link :to="{name:'guanyu'}">Aboutrouter-link>
//简化写法配合传递参数
<router-link 
	:to="{
		name:'guanyu',
		query:{
			id:666,
			title:'传参'
		}
	}">Aboutrouter-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

六.路由的props配置

作用:让组件更方便的收到参数

         children: [
            {
              name: "xiangqing",
              path: "detail/:id/:title", //params需要设置传参,query不用
              component: Detail,
     //props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件.
              props:{a:1,b:'hello'}//写死的传递数据,不常用
    //props的第二种写法,值为布尔值,如果为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件.
              props: true,
    //props的第三种写法,值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件.
    //()括号中为解构赋值$route拿到query再解构赋值拿到id和title,es6写法
              props({ query: { id, title } }) {
                return { id: id, title: title };
              },
            },
          ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

七.的replace属性

1. 作用:控制器路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史,replace是替换当前记录,路由跳转的时候默认是push
3. 如何开启replace模式:

跳转

八.编程式路由导航

1. 作用:不借助进行路由跳转,让路由跳转更加灵活
2. 具体编码:

  methods: {
    pushShow(m) {
    // $router的两个API
      this.$router.push({
        name: 'xiangqing',//只能用name不能用path路径写法
        params: {
          id: m.id,
          title: m.title
        }
      })
    },
    replaceShow(m) {
      this.$router.replace({
        name: 'xiangqing',//只能用name不能用path路径写法
        params: {
          id: m.id,
          title: m.title
        }
      })
    },
    //后退
     back() {
      this.$router.back()
    },
    //前进
    forward() {
      this.$router.forward()
    },
    //传递参数,正数前进n步,负数后退n步
    go() {
      this.$router.go(number)
    },
  }
  
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

九.缓存路由组件

1. 作用:让不展示的路由组件保持挂载,不被销毁
2. 具体编码:

 <!--include只缓存某一组件(要写组件的name),不写则全部缓存-->
    <keep-alive include="News">
 <!--如果想要缓存其中两个或四个而不全部缓存，需要写成数组形式，且要加：-->
    <keep-alive :include="['News','Messages']">
        <router-view></router-view>
    </keep-alive>
1
2
3
4
5
6

十.新的生命周期钩子

1. 作用:路由组件独有的两个钩子,用于捕获路由组件的激活状态.
2. 具体名字:
   1. activate 路由组件被激活时触发.
   2. deactivated 路由组件失活时触发.