一、router-link及router-view

:用来做导航,通过传入to属性来指定链接

:用来做路由出口,路由匹配到的组件都会渲染在这里

const router = new VueRouter({
routes //相当于routes: routes
}) // 将router配置注入路由从而让整个应用具有路由功能
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

我们可以通过this.$router来访问路由器,然后通过this.$route来访问当前路由。

二、动态路由标记

1.作用

动态路由标记的多个不同的路由映射到同一个组件。路由中需要夹杂路由参数,例如/user/:id,冒号是路由参数的标志。当匹配到一个路径的时候,参数值会被设置到this.$route.params,可以在每个组件内使用。

2.响应路由参数的变化

当使用路由参数,即动态路由的时候,因为这时候不同的路由映射的是同一个组件,那么这个组件将会被复用,而不是销毁后再创建,这也意味着组件的生命周期钩子将不会被调用

但是某些时候,我们复用组件的时候,可能想对路由参数的变化做出响应,可以简单地监测(watch)$route对象或者使用2.2版本中引入的beforeRouteUpdate导航守卫。导航守卫类似method属性,直接在对象中当做属性加入。当然路径中也可以使用通配符,路由中使用了,那么$route.params内部会自动添加一个参数pathMatch,它包含了URL通过通配符被匹配的部分。

三、嵌套路由

实际项目中的页面,通常是通过多个嵌套的组件组成。所以顶层组件就渲染最高级出口,当然某个组件内也拥有自己的

<div id="app">
<router-view></router-view>
</div> // User组件
const User = {
template: '<div>User {{ $route.params.id }}</div>'
} // router
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
}) // User组件内部加入<router-view></router-view>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
} // 想在嵌套的出口中渲染组件,需要在VueRouter的参数中配置children const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profil9e',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
}) // 当只访问"/user/foo"时,没有匹配任何路由,所以User内部的<router-view></router-view>不会渲染什么,所以这时候需要创建一个空路径,并映射到一个组件。
{
path:" ",
component: UserHome
}

四、编程式的导航

除了使用创建a标签来定义导航链接。我们还可以借助router的实例方法,来通过编程实现。

主要的编程实现方法有:

  • router.push(location,?onComplete,?onAbort)
  • router.replace(location,?onComplete,?onAbort)
  • router.go(n)

1.router.push

使用router.push方法,会向history栈中添加一个新的记录。当用户点击浏览器的前进后退按钮时,会导航到相应的url。

当你点击中的a标签时,相当于执行router.push方法。

1.1此方法的参数:location,onComplete,onAbort

  • location:这个参数可以直接使用字符串路径或者一个描述地址的对象
router.push('home')

router.push({path:'home'})

router.push({name:'user', params: {userId: '123'}})

router.push({path:'register', query: {id: '34'}}) //带查询参数,变为"/register?id=34"

注意:如果提供了path,那么params会被忽略,上述例子query不属于这种情况。如果想提供参数params,那么可以使用name,不能使用path,因为params在path存在情况下都会失效。如果要使用path,还想加入参数,那么必须手写完整的带参数的path。

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则同样适用于router-link的to属性。

在 2.2.0+,可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用

2.router.replace(location,?onComplete,?onAbort)

跟router.push功能类似,唯一的区别是它不会向history栈中添加一个记录,而是去替换history栈中的当前记录。

3.router.go(n)

n是一个整数,n为正整数时,表示向前跳转n步,相反向后跳转n步,超出history栈中的记录时,跳转失效。

五、命名路由

即对VueRouter配置中的routes中的某个路由对象添加name属性,使其成为带有名字的路由。

当你需要链接到一个路由,则需要对中的to赋值一个对象。

const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

上述代码和router.push({ name: 'user', params: { userId: 123 }})作用类似。

六、命名视图

有时候想同级展示多个视图,而不是嵌套展示。一个路由下想展示多个视图,则需要多个组件。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view> const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})

七、重定向和别名

const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})

Vue-router浅识的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  5. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  6. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  10. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

随机推荐

  1. SQLServer 学习相关资料整理【转】

    存储过程: SQL Server 存储过程 博客园上的一篇文章,讲解的非常详细,有测试代码,很实用. sqlserver存储过程中执行动态sql语句  The Curse and Blessings ...

  2. C# 去除文件非法字符名

    string resultFileName = MD5Encrypt(NavigateUrl).Replace("=",string.Empty) + ".txt&quo ...

  3. Monkeyrunner的相关总结

    1.1  monkeyrunner API 主要包括三个模块1.MonkeyRunner:这个类提供了用于连接monkeyrunner和设备或模拟器的方法,它还提供了用于创建用户界面显示提供了方法.2 ...

  4. mysql命令gruop by报错this is incompatible with sql_mode=only_full_group_by

    在mysql 工具 搜索或者插入数据时报下面错误: ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause ...

  5. mac系统安装redis

    1.下载 打开官网:https://redis.io/ Download---Stable---Download3.2.8,下载最新稳定版,这里是3.2.8 2.安装 下载完成后,打开命令行工具,执行 ...

  6. 面试经典问题---数据库索引B+、B-树

    具体讲解之前,有一点,再次强调下:B-树,即为B树.因为B树的原英文名称为B-tree,而国内很多人喜欢把B-tree译作B-树,其实,这是个非常不好的直译,很容易让人产生误解.如人们可能会以为B-树 ...

  7. Codeforces 801C Voltage Keepsake(二分枚举+浮点(模板))

    题目链接:http://codeforces.com/contest/801/problem/C 题目大意:给你一些电器以及他们的功率,还有一个功率一定的充电器可以给这些电器中的任意一个充电,并且不计 ...

  8. 【剑指Offer面试题】 九度OJ1389:变态跳楼梯

    转自:http://www.myexception.cn/program/1973966.html 时间限制:1 秒内存限制:32 兆特殊判题:否提交:2331解决:1332 题目描述: 一只青蛙一次 ...

  9. .NetCore读取配置Json文件到类中并在程序使用

    ConfigurationBuilder 这个类提供了配置绑定,在dnc中 Program中WebHost提供了默认的绑定(appsettings文件) 如果我们需要加载我们自己的json配置文件怎么 ...

  10. hdu 4006 第K大的数(优先队列)

    N次操作 I是插入一个数 Q是输出第K大的数 Sample Input8 3 //n kI 1I 2I 3QI 5QI 4Q Sample Output123 # include <iostre ...