vue--vue-router 组件映射到路由
前言
地址栏路由的发展经历了后端路由配置阶段、前后端分离阶段、直至单页面富应用阶段。本文来总结一下 vue-router 的相关知识点和用法。
正文
1、什么是 vue-router 路由
路由就是SPA（单页应用）的路径管理器,vue-router就是WebApp的链接路径管理系统。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。总之，在vue中页面路径的改变就是组件的切换。
2、通过router-link访问路由实例
（1）普通路由的使用，分如下三步：
a、注册路由组件并定义路由表
b、创建路由实例并挂载到根实例
c、通过 router-link 组件来导航路由,通过router-view来渲染对应的组件，同时导航栏地址跳转。
具体代码如下：
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link :to="{name:'bar',params: { bar: 123 }}">Go to Bar</router-link>
<router-link :to="{name:'car',query: { car: 234 }}">Go to Car</router-link>
</p>
<!-- 路由出口:路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
// 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Car = { template: '<div>Car</div>' } //定义路由表
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', name: 'foo',component: Foo },
{ path: '/bar', name: 'bar',component: Bar },
{ path: '/car', name: 'car',component: Car }
]
// 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
上面的代码中，通过router-link访问路由实例，第一个标签中to属性值匹配路由表中path属性，后面两个通过name值去匹配路由表中的name属性，并且分别传递了参数，注意观察对应的地址栏变化。
（2）嵌套路由
<body>
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = {
template: `<div>
<router-link to="/bar/car">to Car</router-link>
<router-link :to="{name:'dar',query:{dar:123}}">to Dar</router-link>
<router-view></router-view>
</div>` }
const Car = { template: '<div>Car</div>' }
const Dar = { template: '<div>Dar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{
path: '/bar', component: Bar,
children: [
{ path: 'car',name:"car", component: Car },// 这里需要注意子路由path的用法，若前面加了"/" 表示该路由为根路径，router-link中to 需要对应根路径，不推荐在子路由前加"/"
{ path: 'dar', name:"dar",component: Dar }
]
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
运行效果如下：
上面的代码中在根路由中嵌套了子路由，同样通过router-link的方式来访问，也支持name属性匹配路由表和传递值等操作，需要注意子路由推荐使用path属性值不带"/"
3、通过 $router 的实例方法访问路由实例
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由,在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router对象完成。该方法等同于前面的声明式访问路由实例。
this.$router.push()该方法的参数可以是一个字符串路径，或者一个描述地址的对象，该方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
<body>
<div id="app">
<p>
<button @click="handleFoo">to Foo </button>
<button @click="handleBar">to Bar</button>
</p>
<router-view></router-view>
</div>
</body>
<script>
const Foo = { template: '<div>foo{{this.$route.params.foo}}</div>' }
const Bar = { template: '<div>bar{{this.$route.query.bar}}</div>' }
const routes = [
{ path: '/foo', name: 'foo',component: Foo },
{ path: '/bar', name: 'bar',component: Bar },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
methods:{
handleFoo(){
this.$router.push({name:"foo",params:{foo:123}})
},
handleBar(){
this.$router.push({path:"/bar",query:{bar:234}})
}
}
}).$mount('#app')
</script>
但是在重复点击按钮，路由重复时，控制台出现报错，如下：
上面的报错是因为push方法导致路由重复在当前路由，这里需要在原型上修改push方法，代码如下：
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push;
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
除了this.$router.push()之外还有别的访问路由实例方法，如：this.$router.replace()不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.go(n) 在history 记录中向前或者后退多少步，类似 window.history.go(n)。
4、this.$router 和 this.$route 的区别及使用
this.$router：是全局路由器 router 的实例，可以在任何组件内进行访问，路由实例里面有很多属性和方法，比如push方法。
this.$route：是当前激活的页面的路由信息对象，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)，也有一些属性，这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。
总之，可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。
5、动态路由
某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb。除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。代码如下：
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar/123">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
<script>
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar/:id", component: Bar },
];
const router = new VueRouter({
routes,
});
const app = new Vue({
router,
}).$mount("#app");
</script>
运行结果如下：
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
vue--vue-router 组件映射到路由的更多相关文章
- Vue之创建组件之配置路由!
Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...
- vue轮播组件及去掉路由#
最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...
- vue初尝试--组件
github代码同步网址 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...
- vue组件，axios ,路由
组件(Component)自定义封装的功能. 把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功 ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue组件化和路由
组件化 组件化是vue的核心思想,它能提高开发效率,方便重复使用,简化调试步骤,提升整个项目的可维护性,便于多人协同开发 组件通信 父组件 => 子组件: 属性props 特性$attrs 引用 ...
- Vue中router路由的使用、router-link的使用（在项目中的实际运用方式）
文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...
- vue vuex vue-rouert后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...
- vue 开发系列（七） 路由配置
概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将 ...
随机推荐
- Java库中的LocalDate类
Java库中的LocalDate类 类库设计者决定将保存时间与给时间点命名分开.所以标准Java类库分别包含了两个类:一个用来表示时间点的Date类:另一个是用来表示大家熟悉的日历表示法的LocalD ...
- 【reverse】逆向1 数据宽度
[reverse]逆向1 数据宽度 前言 感觉学逆向的都是大佬,正好最近在看java视频的时候,发现讲课的老师居然是从逆向行业转行来的,顿时肃然起敬.于是想在暑假的最后发光发热,把逆向的基础知识学习稳 ...
- yieId详解，以及和return的区别
def foo(): print("starting...") while True: res = yield 4 print("res:",res) g = ...
- 【刷题-LeetCode】307. Range Sum Query - Mutable
Range Sum Query - Mutable Given an integer array nums, find the sum of the elements between indices ...
- Cesium入门1 - Cesium介绍
Cesium入门1 - Cesium介绍 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium简介 Ce ...
- 集合框架-HashSet存储自定义对象
1 package cn.itcast.p4.hashset.test; 2 3 import java.util.HashSet; 4 import java.util.Iterator; 5 6 ...
- 论文解读（DFCN）《Deep Fusion Clustering Network》
Paper information Titile:Deep Fusion Clustering Network Authors:Wenxuan Tu, Sihang Zhou, Xinwang Liu ...
- springboot 添加mybatisjar包发生的异常问题？
一.pro.xml文件中,添加mybatisjar包 <?xml version="1.0" encoding="UTF-8"?> <proj ...
- NumPy 基础知识·翻译完成
原文:Numpy Essentials 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 面试求职交流群 7241 ...
- 详解git fetch与git pull的区别(实操)
感谢原文作者:R-H-R 原文链接:https://blog.csdn.net/riddle1981/article/details/74938111 git fetch和git pull都可以将远端 ...