跟着尚硅谷学vue2—进阶版5.0—路由 vue-router细讲一篇搞定

最新推荐文章于 2025-11-05 19:28:45 发布

原创

最新推荐文章于 2025-11-05 19:28:45 发布 · 846 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

6. 路由 vue-router

1.概念

1. vue-router 的理解

vue 的一个插件库，专门用来实现 SPA 应用

生活路由器

项目中

2. SPA 应用的理解

单页 Web 应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
数据需要通过 ajax 请求获取

spa

3. 路由的理解

1. 什么是路由?

一个路由就是一组映射关系（key - value）
key 为路径, value 可能是 function 或 componen

2. 路由分类

后端路由：
1. 理解：value 是 function, 用于处理客户端提交的请求。
2. 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
前端路由：
1. 理解：value 是 component，用于展示页面内容。
2. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

2.基本路由

1. 基本使用

安装vue-router，命令：npm i vue-router
1. 2022年2月7日以后，vue-router的默认版本，为4版本
2. 并且vue-router4，只能用在vue3中使用
3. vue-router3 , 才能用在vue2中
4. 如果将vue-router4强行用在vue2中，汇报如下错误
应用插件：Vue.use(VueRouter)

编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
     
     
	routes:[
		{
     
     
			path:'/about',
			component:About
		},
		{
     
     
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

指定展示位置
```
<router-view></router-view>
```

总结: 编写使用路由的 3 步

定义路由组件
注册路由
使用路由

核心代码

1. main.js

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";
// 引入VueRouter
import VueRouter from "vue-router";
// 引入路由器
import router from "./router";
// 关闭Vue的生产提示
Vue.config.productionTip = false;

//应用插件
Vue.use(VueRouter);

// 创建vm
new Vue({
   
   
  el: "#app",
  render: (h) => h(App),
  router: router,
});

2. router/index.js

// 该文件专门用于创建整个应用的路由器
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,
    },
  ],
});

3. App.vue

<template>
  <div>
    <div>
      <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
          <div class="page-header"><h2>Vue Router Demo</h2></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <div class="list-group">
            <!-- 原始html中我们使用a标签实现页面的跳转 -->
            <!-- <a class="list-group-item active" href="./about.html">About</a> -->
            <!-- <a class="list-group-item" href="./home.html">Home</a> -->

            <!-- Vue中借助 router-link 标签实现路由的切换 -->
            <router-link
              class="list-group-item"
              active-class="active"
              to="/about"
              >About</router-link
            >
            <router-link
              class="list-group-item"
              active-class="active"
              to="/home"
              >Home</router-link
            >
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!-- 此处到底展示什么组件,得看用户点击的是哪个导航项 -->

              <!-- 指定组件的呈现位置 -->
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "App",
  mounted() {},
};
</script>

2. 几个注意点

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

核心代码

1. pages/About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
  name: "About",
  // beforeDestroy(){
  //     console.log('About组件即将被销毁了');
  // },
  mounted() {
    console.log("About组件挂载完毕了", this);
    window.aboutRoute = this.$route;
    window.aboutRouter = this.$router;
  },
};
</script>

2.pages/Home.vue

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
export default {
  name: "Home",
  // beforeDestroy() {
  //   console.log("Home组件即将被销毁了");
  // },
  mounted() {
    console.log("Home组件挂载完毕了", this);
    window.homeRoute = this.$route;
    window.homeRouter = this.$router;
  },
};
</script>

3.多级路由（嵌套路由）

配置路由规则，使用children配置项：

routes:[
	{
     
     
		path:'/about',
		component:About,
	},
	{
     
     
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
     
     
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
     
     
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

4. 路由的query参数

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

接收参数：
```
$route.query.id
$route.query.title
```

核心代码

1. Detail.vue

<template>
  <ul>
    <li>消息编号：{
  
  { $route.query.id }}</li>
    <li>消息标题：{
  
  { $route.query.title }}</li>
  </ul>
</template>

<script>
export default {
  name: "Detail",
  mounted(){
    console.log(this.$route);
  }
};
</script>

2. Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{
  
  {
          m.title
        }}</router-link> -->

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
        >
          {
  
  { m.title }}
        </router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>