一、Vue Router 的使用

JavaScript:
1.创建组件:创建单页面应用需要渲染的组件
2.创建路由:创建VueRouter实例
3.映射路由:调用VueRouter实例的map方法
4.启动路由:调用VueRouter实例的start方法 HTML:
1.使用v-link指令
2.使用<router-view>标签 router.redirect:
1.应用在首次运行时右侧是一片空白,应用通常都会有一个首页,例如:Home页。
2.使用router.redirect方法将根路径重定向到/home路径:
router.redirect({'/': '/home'})
router.redirect 方法用于为路由器定义全局的重定向规则,全局的重定向会在匹配当前路径之前执行。 执行过程:
当用户点击v-link指令元素时,我们可以大致猜想一下这中间发生了什么事情:
1.vue-router首先会去查找v-link指令的路由映射
2.然后根据路由映射找到匹配的组件
3.最后将组件渲染到<router-view>标签

1. 引入Vue和Vue-Router插件

<script src="vue.js"></script>
<script src="vue-router.js"></script>

2. HTML

<div id="box"> 

</div>
<!--定义模版-->
<template id="a">
<div>
第一个router
</div>
</template>
<template id="b">
<div>
第二个router
</div>
</template>

3. js

let routes = [
{
path:'/home',
component:{template:'#a'},
},
{
path:"/two",
component:{template:"#b"}
},
];
// 定义路由组件
let router = new VueRouter({
routes
});
// 定义路由
new Vue({
el:"#box",
router,
})

4. 将模板增添链接

<div id="box">
<router-link to="/one">One</router-link>
<router-link to="/two">Two</router-link>
<router-view></router-view>
</div>
< router-link > 默认会被渲染成一个 <a> 标签 >>>to=""为我们定义的路由
< router-view > 路由匹配到的组件将渲染在这里

5. 简单示例

<div id="app">
<h1>路飞学城</h1>
<!--<router-link to="/home">首页</router-link>-->
<!--<router-link to="/course">免费课程</router-link>-->
<!-- 命名路由,to前要加冒号 -->
<router-link :to="{name:'home'}">首页</router-link>
<router-link :to="{name:'course'}">免费课程</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</div> <script>
let Home = {
template: `
<div>
<h1>首页</h1>
</div>`,
};
let Course = {
template: `
<div>
<h1>免费课程</h1>
</div>`,
};
let router = new VueRouter({
mode: 'history',
routes: [
// 路径重定向
{path: '', redirect: '/home'},
// 命名路由
{path: '/home', name: 'home', component: Home},
{path: '/course', name: 'course', component: Course},
]
});
let app = new Vue({
el: '#app',
router: router,
})
</script>

备注:mode: 'history' =>默认是hash,但是写上这个后就会出现url问题

二、补充知识

1、Vue Router定义

对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统(Vue-Router)。前端路由的核心——改变视图的同时不会向后端发出请求。

2、浏览器提供了两种支持(hash/history)

(1) hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。

比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

(2) history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)

(3) 总结

这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

3. router-link

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query,地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query,地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params,地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

4. router.push(...)

// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query,地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query,地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params,地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})

5. 备注

(1) 关于带参数的路由总结
(1)无论是直接路由“path"还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询
(2)参数名:查询参数值“;
(3)直接路由“path" 带路由参数params params 不生效;
(4)命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;
(2) 设置路由map里的path值
带路由参数params时,路由map里的path应该写成:  path:'/apple/:color' ;
带查询参数query时,路由map里的path应该写成: path:'/apple' ;
(3) 获取参数方法
在组件中:  {{$route.params.color}}
在js里: this.$route.params.color

6. vue中从一个页面传参到另一个页面

(1) 首先在home.vue中定义
updates(id){
this.$router.push({
path:'/world',
name:'world',
params:{
id : id
}
})
}
(2) 在world.vue中定义
export default {
name: '',
data () {
return {
id: ''
}
},
created(){
this.getParams()
},
methods: {
getParams () {
// 取到路由带过来的参数
var routerParams = this.$route.params.id
// 将数据放在当前组件的数据内
this.id = routerParams
}
},
watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
'$route': 'getParams'
}
}

三、Vue嵌套路由

1. 定义

​ 嵌套路由是一个场景的需求,假设用户能够通过路径 /home/news 和 /home/mesages访问一些内容,一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。

2. 示例

let UserInfo = {
template: `
<div>
这是用户信息
</div>`
};
let UserPost = {
template: `
<div>
这是用户请求
</div>`
}; // 2. 定义路由
let router = new VueRouter({
// mode: 'history',
routes: [
{
path: '/user/:id',
name: 'user',
component: User,
children:[
{path:'userinfo', component: UserInfo},
{path:'userpost', component: UserPost},],
},
]
});

四、路由对象

https://www.cnblogs.com/avon/p/5943008.html

在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,
并且当路由切换时,路由对象会被更新。
路由对象暴露了以下属性:
1.$route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如 "/home/news" 。
2.$route.params
对象,包含路由中的动态片段和全匹配片段的键值对
3.$route.query
对象,包含路由中查询参数的键值对。例如,对于/home/news/detail/01?favorite=yes
会得到$route.query.favorite == 'yes' 。
4.$route.router
路由规则所属的路由器(以及其所属的组件)。
5.$route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
6.$route.name
当前路径的名字,如果没有使用具名路径,则名字为空。
  • this.$router 对应的是当前app的路由对象

  • this.$route 对应的是当前的路由信息

  • 路由切换的监听需用到watch侦听器

// 怎么查看每一次路由切换之后的当前路由信息呢?
watch: {
'$route': function (to, from) {
console.log(to); // 要切换到的路由信息
console.log(from); // 切换前的路由信息
// ajax 请求数据
// this.data.courseList
}
}

五、动态路由匹配

1. HTML

<div id="app">
<router-link :to="{name:'user', params:{id: 10}}">alex</router-link>
<router-view></router-view>
</div>

2. js

let User = {
template: `
<div>
<h1>这是{{ this.$route.params.id }}的个人中心页面</h1>
<p>当前路由的query信息{{ this.$route.query.key }}</p>
</div>`,
}; let router = new VueRouter({
// mode: 'history',
routes: [
// 添加参数冒号
// id(id可随便取名,标识),这个属性id可以在$route.params.id中获取
{path: '/user/:id', name: 'user', component: User},
] }); let app = new Vue({
el: '#app',
data: { },
router: router,
})

3. 记住两个参数

(1)this.$route.params获取URL中的参数

(2)this.$route.query获取URL中的查询参数

六、编程式导航

// 用代码控制页面跳转;定义课程页组件
let Course = {
template: `<div>
<h1>这是免费课程页面!</h1>
<button v-on:click="toHome">返回主页</button>
</div>`,
methods: {
toHome(){
// 编程式导航 (用代码控制页面跳转)
this.$router.push({name: 'home'})
}
}
};

8. 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. Xamarin.Android之给我们的应用加点过渡效果

    零.前言 试想一下,我们的应用正在请求一些数据,假设网络不是很好,要花比较长的时间等待,这个时候界面什么反应也没有, 一动不动,用户可能就会认为应用挂掉了,这么久都没反应的,说不定下一分钟用户就把它卸 ...

  2. .NET的面向对象

    一.继承 1.C#中的继承规则 继承是可传递的 派生类是对基类的扩展 构造函数和析构函数不能被继承 派生类可以覆盖已继承的成员 派生类只能从一个类中继承,可以通过接口来实现多重继承 类可以定义虚属性. ...

  3. mysql shell

    mysql 查询10分钟以内的数据:select *from t_agent where int_last_login>=CURRENT_TIMESTAMP - INTERVAL 10 MINU ...

  4. 函数lock_rec_bitmap_reset

    /*********************************************************************//** Resets the record lock bi ...

  5. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  6. C# foreach 原理以及模拟的实现

    public class Person:IEnumerable     //定义一个person类  并且 实现IEnumerable 接口  (或者不用实现此接口 直接在类 //里面写个GetEnu ...

  7. Visual C++基础知识(win32exe)

    1.Visual C++简称VC或者VC++ 是一个集成开发环境(编辑器+调试器+编译器) gcc---Linux和Unix的C++编译器 Vc----Windows的C++编译器 2.MFC(Mic ...

  8. .net 自动分类算法【原创】

    目前自动分类算法是参考网上的思路和想法个人自主研发的. 当然互联网上有很多人采用不同的方式去解决自动分类问题,也有不同的算法和论文支持去做,但纵观自动分类这块工作是属于机器学习这块工作内容,总结出来比 ...

  9. CAS实现单点登录SSO执行原理及部署

    一.不落俗套的开始 1.背景介绍 单点登录:Single Sign On,简称SSO,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. CAS框架:CAS(Centra ...

  10. WarShall算法

    1.引言 图的连通性问题是图论研究的重要问题之一,在实际中有着广泛的应用.例如在通信网络的联通问题中,运输路线的规划问题等等都涉及图的连通性.因此传递闭包的计算需要一个高效率的算法,一个著名的算法就是 ...