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 添加进来,我们需要做的是,将 ...
随机推荐
- 创建app子应用，配置数据库，编写模型，进行数据迁移
文章目录 web开发django模型 1.创建app子应用 2.配置子应用 3.使用 4.配置子应用管理自已的路由 django数据库开发思维与ORM 1.创建数据库 2.配置数据库 3.安装pymy ...
- 【刷题-LeetCode】164 Maximum Gap
Maximum Gap Given an unsorted array, find the maximum difference between the successive elements in ...
- 【记录一个问题】golang的xorm组件更新数据库未生效
代码中使用了类似的方式来更新数据库: func (writer *dbWriter) updateVersion(ctx context.Context, IP string, version str ...
- 第02讲：Flink 入门程序 WordCount 和 SQL 实现
我们右键运行时相当于在本地启动了一个单机版本.生产中都是集群环境,并且是高可用的,生产上提交任务需要用到flink run 命令,指定必要的参数. 本课时我们主要介绍 Flink 的入门程序以及 SQ ...
- gorm创建记录
1. 简单创建记录 user := User{Name: "李四", Age: 88, Birthday: time.Now()} ret := db.Create(&u ...
- Tomcat-IDEA整合Tomcat服务器
Tomcat(IDEA整合Tomcat服务器) 可以加多个版本tomcat
- APC 篇——备用 APC 队列
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- python03day
回顾 pycharm简单使用 while循环 结构 pass while实现打印1-2+3-4+--+99 格式化输出:针对str,让字符串中某些位置变为动态可传入的 % s str d digist ...
- SIFT，SuperPoint在图像特征提取上的对比实验
SIFT,SuperPoint都具有提取图片特征点,并且输出特征描述子的特性,本篇文章从特征点的提取数量,特征点的正确匹配数量来探索一下二者的优劣. 视角变化较大的情况下 原图1 原图2 SuperP ...
- Linux 配置mysql 免安装版。
二.Linux配置 mysql ? 1.linux配置mysql(要求全部使用免安装版) 5.1.从官网下载mysql5.tar.gz 5.2.使用xftp把mysql的压缩包上传到服务器上 5.3. ...