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 添加进来,我们需要做的是,将 ...
随机推荐
- 2022 跳槽涨薪必不可少面试通关宝典 —— css 篇
生于忧患死于安乐!已经居家隔离 23 天了,解封以后估计就得找工作了,提前准备起来!需要的赶紧收藏起来 一.谈谈你对 BFC 的理解及作用. BFC 是 Block Formatting Contex ...
- 使用idea时jsp中使用out.print();时报错的解决办法
在用Maven创建web项目时 在jsp页面中out.print();老是报错 这边print显示红色出错因为这边使用的是JSP的API并不是Servlet的,但是可以运行,所以我们只要导包就完事其实 ...
- 5.12-jsp分页功能学习
1.分页功能相关资料查询 分页须知知识点: (1)JDBC2.0的可滚动结果集. (2)HTTP GET请求. 一.可滚动结果集 Connection con = DriverManager.g ...
- 【刷题-LeetCode】122 Best Time to Buy and Sell Stock II
Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price of a ...
- C++初始化列表各情况分析
今天回顾了下C++初始化列表的知识,接下来我对这一知识作一总结. 我们在定义了一个类的时候,需要对类的成员进行初始化.关于初始化,有两种方法,一种在初始化列表中进行,另一种就是在构造函数中进行,对于这 ...
- golang中channel讲解
1. 无缓冲通道 2. 有缓冲通道 有缓冲通道特点:当channel已经满,在向里面写数据就会阻塞,当channel已经为空,在从里面读数据就会阻塞. 3. 关闭channel package mai ...
- fluentd分布式日志管理系统
如何有效地收集和管理大量服务器的日志一直是企业很头疼的一个问题,部分企业应用shell脚本来管理,部分企业基于hadoop来开发自己的日志管理系统,第一种管理成本巨大,需要大量的人力来维护脚本的正常运 ...
- 利用JavaScript与正则表达式判断输入账号格式是否正确
在学习了HTML DOM对象后,做几个小练习来巩固一下所学内容. 正则表达式: 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE ...
- 使用JMX Exporter监控Rainbond上的Java应用
场景 Prometheus 社区开发了 JMX Exporter 用于导出 JVM 的监控指标,以便使用 Prometheus 来采集监控数据.当您的 Java 应用部署在Rainbond上后 可通过 ...
- 原生js获取子元素
感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...