路由（vue-router）（一）

歪大梨

已于 2022-11-27 16:08:59 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-11-26 22:27:48 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64037609/article/details/128058058

版权

前端专栏收录该内容

82 篇文章

订阅专栏

在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

版本： + vue-router@3.6.5

基本使用

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

<template>
  <div>
    <h1>主组件</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
</style>

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中配置好了之后，一定要在视图中使用，即用<router-view></router-view>渲染

这里是在 App.vue 渲染

<!-- 路由出口 路由视图 -->
<router-view></router-view>

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

再回去看脚手架安装路由

6.路由重定向

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

7. 路由的导航

<router-link></router-link>

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

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

<!-- 
    路由导航

    router-link和router-view是路由的组件
    router-link被默认解析成a标签，如果不想渲染默认的a标签如何解决？利用tag属性去改变默认标签元素
    router-link的to属性，即跳转的url地址，一定要和path地址一致
    activeClass：高亮、使激活
-->
<router-link activeClass='active' tag='span' to='/home'>首页</router-link>
<router-link activeClass='active' tag='span' to='/cart'>购物车</router-link>

在app.vue中演示

<!-- 路由导航 -->
<!-- router-link的to属性，指向打开的地址，一定要和path地址一致 -->
<!-- router-link默认是解析成a标签，如果加是tag属性，可以解析成别的标签 -->
<!-- activeClass 即高亮，选中谁时，使激活 -->
<router-link active-class="active" tag="span" to="/home">首页</router-link>
<router-link active-class="active" to="/cart">购物车</router-link>

<!-- 路由出口 -->
<router-view></router-view>

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