路由（vue-router）

目录

1. 概念

2.路由的官方地址

3. 下载方式

3.1 通过手动下载安装

3.2 通过脚手架安装

4.基本路由的创建

5. 路由出口（路由的视图）

6.路由重定向

7. 路由的导航

8. 路由的嵌套

---

 

在vue中，组件的渲染只能通过以下两种方式

一、组件的嵌套（前几篇组件的嵌套）

二、路由的渲染

vue中的路由：一个路由地址对应一个组件

1. 概念

通过不同的路由地址，渲染不同的组件内容 ​ 路由也是vue的核心插件之一 ​。官方概念： Vue Router 是 Vue.js (opens new window) 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

2.路由的官方地址

https://v3.router.vuejs.org/zh/

3. 下载方式

有两种方式：手动安装和通过脚手架安装

3.1 通过手动下载安装

• 安装命令（注意，这里安装路由3的版本）

npm i vue-router@3
​
版本： + [email protected]

• 基本使用

1、在src文件夹下，创建 router=>index.js

// 一、引入vue核心库
import Vue from 'vue'
// 二、引入vue-router库
import VueRouter from 'vue-router'
// 三、调用路由插件
Vue.use(VueRouter)
​
// console.log(VueRouter); // 构造函数
// console.log(new VueRouter()); // 实例化出来的路由对象
​
// 四、实例化路由配置对象并导出
export default new VueRouter({
    // 应该写路由配置属性
})

2、main.js中

// 引入封装好的路由模块，在vue配置对象中，有一个router配置属性
import router from './router'
new Vue({
    render: h => h(App),
    router, // 使用
}).$mount('#app')

这时，在App.vue的加载完成要执行的mounted函数中，就可以打印一下this，即vue实例，实例上面的原型上就可以看到与路由有关的两个属性：$route和$router

App.vue中

mounted(){
    console.log(this);
}

route: 路线、路径、航线
router: 路由器
​
$route是一个对象，它记录着当前url路径的相关信息
$router也是一个对象，它的原型链上有一些如添加路由的方法

再看基本路由的创建和路由出口。

3.2 通过脚手架安装

安装的时候选择router

路由有两种模式，history历史模式和hash模式

• hash模式：地址栏中会带#号

• history历史模式：地址栏中不带#号，但是打包以后的代码需要后端配置才可以正确跳转

安装完成之后，进入项目，npm run serve启动，并初始化项目

• 初始化项目，共以下三步

一、删除components下面的helloword.vue、assets下面的图片和views文件夹
二、初始化路由的模块
​

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
​
const routes = [
]
const router = new VueRouter({
  routes
})
export default router

​
​
三、初始化app.vue
​

​

​

4.基本路由的创建

router =>index.js

// 一、引入vue核心库
import Vue from 'vue'
// 二、引入vue-router 库
import VueRouter from 'vue-router'
// 三、调用路由插件
Vue.use(VueRouter);
​
// 五、引入封装好的组件
import Home from '../components/home.vue'
​
// 四、实例化路由配置对象并导出
export default new VueRouter({
    // 这里写路由配置属性
    routes:[ // routes，路线，可以设置n个地址，渲染n个组件，因此这里是复数
        {
            path:'/home',  // 地址，它和浏览器的url地址一致
            component:Home  // 组件，上面引入的组件，即url地址是home时，哪个组件展示
        }
    ]
})

5. 路由出口（路由的视图）

路由在router=>index.js中配置好了之后，一定要在视图中使用，即用渲染

这里是在 App.vue 渲染

当我们在url地址中输入/home时，就会展示首页组件，输入/cart就会展示购物车组件

再回去看脚手架安装路由

6.路由重定向

{
    path:'*',
    redirect:'/地址' // 路由的重定向
}
// 路由的重定向，即上面所有的路由都无法匹配的时候，指向这个路径。注意一定要放在最下面，有点像404
{
    path: '*',
    redirect: '/home'
}

7. 路由的导航

作用：相当于html中点击a链接跳转到不同的页面。

即点击导航路由，跳转到不同的路由地址，渲染不同的视图

首页
购物车

在app.vue中演示

首页
购物车
​

总结：router-link有三个属性：to(必须) tag active-class

8. 路由的嵌套

• 一级路由，我们一般都放在pages文件夹下

• 二级路由，我们一般都放在views文件夹下

一个原则，一般不会在App.vue中写任何内容，只会设置一级路由出口，因为在这个里面写的东西，在所有的视图中都会存在。

操作方法：

1、创建组件

2、设置路由

3、设置路由出口