一文你带快速认识Vue-Router路由
摘要：Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
本文分享自华为云社区《Vue-Router路由快速了解与应用》，原文作者：北极光之夜。
一.速识概念：
1. 后端路由：
1.根据不同的用户URL请求,返回不同的内容,本质上是URL请求地址与服务器资源之间的对应关系。
2.但是呢，后端渲染存在性能问题。
2. 前端路由：
3.所以出现了Ajax前编渲染 ，前端渲染能提高性能，但是不支持浏览器的前进后退操作。
4.这时又出现了SPA (Single Page Application)单页面应用程序，整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。
5.SPA实现原理之一就是基于URL地址的 hash (hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求) 。在实现SPA过程中， 其中最核心的技术点就是前端路由。
6.前端路由就是根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事件处理函数之间的对应关系。
3.Vue Router：
这是官方使用文档链接。：https://router.vuejs.org/zh/guide/#javascript
Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
它的功能如下：
1.支持HTML5历史模式或hash模式。
2.支持嵌套路由。
3.支持路由参数。
4.支持编程式路由。
5.支持命名路由。
二.基本使用:
前提：
下面将会以一个HTML单页面演示Vue Router的基本使用步骤。在vue项目里也是一样的原理。当前单页面基本代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"> </div>
<script>
const app = new Vue({
el:"#app",
data: {}
})
</script>
</body>
</html>
可以看到什么都没有：
下面开始使用的具体步骤：
1.引入相关的文件：
单页面肯定得先导入vue文件与vue-router文件，这样我们才能够使用路由。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2.添加路由链接：
以下是一个vue提供的标签，默认会被渲染为a标签。其中有一个to属性，这个to属性会被渲染为href属性，默认值被渲染为 # 开头的hash地址。简单来说就是当用户点击不同时跳转不同内容，而这个标签就是用户要点击的东西，相当于a标签嘛。
<router-link to="/..." >...</router-link>
给我们的单页面上加一个page1和一个page2的链接：
<div id="app">
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
</div>
3.添加路由填充位：
下面这个标签叫路由填充位，就是说未来通过我们的路由规则匹配到的组件，将会被渲染到 router-view所在位置。简单来说，就是用户点击路由链接，那得跳转内容吧，我们知道的是肯定不是整个页面都跳转，只是页面内相关的局部发生内容改变，这个局部就是router-view所在显示的区域。
<router-view></router-view>
给我们的页面添加：
<div id="app">
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
<router-view></router-view>
</div>
4.定义路由组件：
既然要显示不同的内容，那肯定是用一个组件保存一份内容。下面我们给单页面定义page1，page2这两个组件。
<script>
const Page1 = {
template: '<h1>我是北极光之夜1号</h1>'
}
const Page2 = {
template: '<h1>我是北极光之夜2号</h1>'
}
const app = new Vue({
el:"#app",
data: {}
})
</script>
5.配置路由规则井创建路由实例：
routes是路由规则数组。每个路由规则都是一个配置对象， 其中至少包含path 和component 两个属性，path 表示当前路由规则匹配的hash 地址，component 表示当前路由规则对应要展示的组件。简单来说就是你点击那个链接对应的地址要对应的是哪个内容的组件。path跟router-link标签里的地址要一样，别写错了。
const router = new VueRouter({
routes: [
{path:'/page1',component:Page1 },
{path:'/page2',component:Page2 }
]
})
6.把路由挂载到Vue根实例中：
为了能够让路由规则生效，必须把路由对象挂载到vue 实例对象上。
const app = new Vue({
el:"#app",
data: {},
router
})
7.效果与单页面代码：
以上我们就大工告成~
上面的完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
<router-view></router-view>
</div>
<script>
const Page1 = {
template: '<h1>我是北极光之夜1号</h1>'
}
const Page2 = {
template: '<h1>我是北极光之夜2号</h1>'
}
const router = new VueRouter({
routes: [
{path:'/page1',component:Page1 },
{path:'/page2',component:Page2 }
]
})
const app = new Vue({
el:"#app",
data: {},
router
})
</script>
</body>
</html>
三.路由重定向：
路由重定向指的是用户在访问地址A的时候,强制用户跳转到地址B，从而展示特定的组件页面。
通过路由规则的redirect属性,指定一个新的路由地址，可以很方便地设置路由的重定向。
{path:'/..',redirect: '/...'}
其中path表示重定向的原地址，redirect表示新地址。
比如第二大点的案例中，刚打开的页面如下，在根目录，但我们想一进入就显示page1，那就给根目录重定向。
修改路由规则如下：
const router = new VueRouter({
routes: [
{path:'/page1',component:Page1 },
{path:'/page2',component:Page2 },
{path:'/',redirect:'/page1'}
]
})
看效果，我没点击就默认进入page1了：
四.嵌套路由：
功能如下：
- 点击父级路由链接显示模板内容。
- 模板内容中又有子级路由链接。
- 点击子级路由链接显示子级模板内容。
比如我们改进第二大点的案例，当点击page2显示page2内容时，page2里又有两个子路由连接，star和moon，当点击其中一个链接时又能显示对应的star或moon内容。
1.首先给page2组件添加两个子路由链接：
const Page2 = {
template: `
<div>
<h1>我是北极光之夜2号</h1>
<hr/>
<router-link to="/page2/star">Star</router-link>
<router-link to="/page2/moon">Moon</router-link>
<hr/>
</div>`
}
此时页面也把显示子路由链接出来了：
2.给两个子路由链接添加路由填充位：
const Page2 = {
const Page2 = {
template: `
<div>
<h1>我是北极光之夜2号</h1>
<hr/>
<router-link to="/page2/star">Star</router-link>
<router-link to="/page2/moon">Moon</router-link>
<hr/>
<router-view></router-view>
</div>`
}
3.设置两个子组件star与moon的内容：
const Star = {
template: '<h2>我是北极光之夜2号下的star</h2>'
}
const Moon = {
template: '<h2>我是北极光之夜2号下的Moon</h2>'
}
4.配置路由规则：
page2的规则除了path和component属性外，再添加一个children属性，这个属性以数组表示，数组里存放其子路由的规则，其规则也是一样的，套娃套娃。
const router = new VueRouter({
routes: [
{path:'/page1',component:Page1 },
{
path:'/page2',
component:Page2,
children: [
{path: '/page2/star',component:Star},
{path: '/page2/moon',component:Moon}
]
}
]
})
5.效果与单页面代码：
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
<router-view></router-view>
</div>
<script>
const Page1 = {
template: '<h1>我是北极光之夜1号</h1>'
}
const Page2 = {
template: `
<div>
<h1>我是北极光之夜2号</h1>
<hr/>
<router-link to="/page2/star">Star</router-link>
<router-link to="/page2/moon">Moon</router-link>
<hr/>
<router-view></router-view>
</div>`
}
const Star = {
template: '<h2>我是北极光之夜2号下的star</h2>'
}
const Moon = {
template: '<h2>我是北极光之夜2号下的Moon</h2>'
}
const router = new VueRouter({
routes: [
{path:'/page1',component:Page1 },
{
path:'/page2',
component:Page2,
children: [
{path: '/page2/star',component:Star},
{path: '/page2/moon',component:Moon}
]
}
]
})
const app = new Vue({
el:"#app",
data: {},
router
})
</script>
</body>
</html>
五. 动态路由匹配：
1.动态匹配路由基本使用：
如果某些路由规则的一部分是一样的，只有另一部分是动态变化的，那我们可以把这些动态变化的部分形成路由参数，这些参数就叫做动态路由匹配。简单来说，你先看下面这些路由链接，它们都有/page/，就是后面不一样：
<router-link to="/page/1">Page1</router-link>
<router-link to="/page/2">Page2</router-link>
<router-link to="/page/3">Page3</router-link>
那该咋配置路由呢？这样吗：
const router = new VueRouter({
routes: [
{path:'/page/1',component:Page},
{path:'/page/2',component:Page},
{path:'/page/3',component:Page}
]
})
这样万一有很多一个个写岂不是太麻烦了，所以引入参数，在动态改变的部分定义为参数，参数前面有一个冒号,那上面可简写成如下，动态部分设为参数 ：id 。
const router = new VueRouter({
routes: [
{path:'/page/:id',component:Page },
]
})
在组件可以通过以下语法获取当前路由的参数：
$router.params.参数名称
好，再次修改第二大点的案例完成动态路由匹配：
1.定义路由链接：
<div id="app">
<router-link to="/page/1">Page1</router-link>
<router-link to="/page/2">Page2</router-link>
<router-link to="/page/3">Page3</router-link>
<router-view></router-view>
</div>
2.动态配置路由，参数id：
const router = new VueRouter({
routes: [
{path:'/page/:id',component:Page1 },
]
})
3.设置组件内容，并显示当前路由的参数：
const Page1 = {
template: '<h1>我是北极光之夜1号,当前id为：{{$route.params.id}}</h1>'
}
看效果：
2.路由组件传参：
上面的$route与对应路由形成高度耦合，不够灵活啊，所以可以使用props将组件和路由解耦。简单来说，好像也没什么说的，直接看下面实例就能理解了。
2.1 当props为布尔类型：
const router = new VueRouter({
routes: [
// 设置props，如果props为true，router.params会被设置为组件属性
{path:'/page/:id',component:Page1,props: true },
]
})
const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数id和使用它
props: ['id'],
template: '<h1>我是北极光之夜1号,当前id为：{{id}}</h1>'
}
能达到一样的效果，且更灵活了，上面记得反过来，先定义组件才配置路由规则，只是为了直观才这样写：
2.2 当props为对象类型：
const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数对象 并显示
props: ['name','age'],
template: `<h1>我是北极光之夜1号,当前id为：{{id}}
<hr/>
姓名为：{{name}} ，年龄为：{{age}} </h1>`
}
const router = new VueRouter({
routes: [
// props为一个参数对象，它会原样设置为组件属性，
// 里面的自定义的参数都能传过去，但是id传不了了
{path:'/page/:id',component:Page1 , props: {name:'auroras',age: 18} }
]
})
效果，对象props对象里的能获取，id就不行了：
2.3 当props为函数类型：
这个就什么都能获取。
const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数
props: ['name','age','id'],
template: `<h1>我是北极光之夜1号,当前id为：{{id}}
<hr/>
姓名为：{{name}} ，年龄为：{{age}} </h1>`
}
const router = new VueRouter({
routes: [
// props为函数，这个对象接收router对象为自己形参，
// 里面的自定义的参数和id都能传过去
{path:'/page/:id',
component:Page1 ,
props: router => ({id: router.params.id,name:'auroras',age: 18}) }
]
})
效果：
当前完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/page/1">Page1</router-link>
<router-link to="/page/2">Page2</router-link>
<router-link to="/page/3">Page3</router-link>
<router-view></router-view>
</div>
<script>
const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数对象
props: ['name','age','id'],
template: `<h1>我是北极光之夜1号,当前id为：{{id}}
<hr/>
姓名为：{{name}} ，年龄为：{{age}} </h1>`
}
const router = new VueRouter({
routes: [
// props为函数，这个对象接收router对象为自己形参，
// 里面的自定义的参数和id都能传过去
{path:'/page/:id',
component:Page1 ,
props: router => ({id: router.params.id,name:'auroras',age: 18}) }
]
})
const app = new Vue({
el:"#app",
data: {},
router
})
</script>
</body>
</html>
六.Vue-Router命名路由：
为更加方便的表示路由的路径，可以给路由规则起一个别名， 即为“命名路由”。继续改进上面的案例讲解用法：
1.首先给路由规则加一个name属性，这个就是别名：
const router = new VueRouter({
routes: [
{
name: 'user',
path:'/page/:id',
component:Page1 ,
props: router => ({id: router.params.id,name:'auroras',age: 18}) }
]
})
2.在路由链接中使用：
<div id="app">
<router-link :to="{name:'user',params: {id: 1}}">Page1</router-link>
<router-link to="/page/2">Page2</router-link>
<router-link to="/page/3">Page3</router-link>
<router-view></router-view>
</div>
我们把第一个路由链接改进，to前面加上冒号，其中name表示匹配的是哪个路由规则，params表示要传递的参数，看下面是一样的效果：
七.编程式导航：
- 声明式导航：首先声明式导航是指用户通过点击链接完成导航的方式，比如点击a标签或者路由链接这些完成的跳转。
- 编程式导航：编程式导航就是说跳转是因为我点击它，它不是链接，但是它在JavaScript里调用了某个API也实现了跳转。
- 常用的编程式导航API如下：
this.$router.push('要跳转的hash地址')
this.$router.go(n)
push里直接放要跳转的哈希地址，go方法实现前进和后退，n代表数组，若n为1代表在历史记录中前进一位，-1代表在历史记录中后退一位。
1. this.$router.push(’ ')：
重写一个案例，有page1、page2、page3三个路由链接，而在page3里有一个按钮，这个按钮的作用是点击后返回显示page1的内容。这个按钮可不是声明式导航里的链接，就是一个按钮。
1.定义普通的路由链接：
<div id="app">
<router-link :to="/page/1">Page1</router-link>
<router-link to="/page/2">Page2</router-link>
<router-link to="/page/3">Page3</router-link>
<router-view></router-view>
</div>
2.定义3个组件内容，其中给page3组件里放一个按钮，并绑定点击事件，在事件里通过API导航到page1：
const Page1 = {
template: `<h1>我是北极光之夜1号</h1>`
}
const Page2 = {
template: `<h1>我是北极光之夜2号</h1>`
}
const Page3 = {
template: `<div>
<h1>我是北极光之夜3号</h1>
<button @click="goPage1">返回page1</button>
</div>`,
methods: {
goPage1(){
this.$router.push('/page/1')
}
},
}
3.路由规则：
const router = new VueRouter({
routes: [
{path:'/page/1',component: Page1},
{path:'/page/2',component: Page2},
{path:'/page/3',component: Page3}
]
})
4.看效果：
5.完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/page/1">Page1</router-link>
<router-link to="/page/2">Page2</router-link>
<router-link to="/page/3">Page3</router-link>
<router-view></router-view>
</div>
<script>
const Page1 = {
template: `<h1>我是北极光之夜1号</h1>`
}
const Page2 = {
template: `<h1>我是北极光之夜2号</h1>`
}
const Page3 = {
template: `<div>
<h1>我是北极光之夜3号</h1>
<button @click="goPage1">返回page1</button>
</div>`,
methods: {
goPage1(){
this.$router.push('/page/1')
}
}, }
const router = new VueRouter({
routes: [
{path:'/page/1',component: Page1},
{path:'/page/2',component: Page2},
{path:'/page/3',component: Page3}
]
}) const app = new Vue({
el:"#app",
data: {},
router
})
</script>
</body>
</html>
不止href路径，还可以有以下操作：
//字符串形式（路径的名称）
router.push('/page1')
//对象的形式
router.push({path: '/page1'})
//也可以传递参数，命名的路由
router.push({name: '/page1',parmas:{id: 1}})
//带查询参数，变成 /page1?p=id
//这个挺实用的，比如在某些音乐网页，点击歌单后要导航到另一个该歌单详细界面，此时要带id，详细界面靠此id重新发送请求，请求详细信息
router.push({parh: '/page1',query:{p: 'id' }})
2. this.$router.go(n)：
改进第1小点的案例，当我page3跳到page1时，page1里又有一个返回的按钮。我们把n设置为-1，他就会在历史记录中后退一位，后退一位就是page3.
修改page1组件内容：
const Page1 = {
template: `<div>
<h1>我是北极光之夜1号</h1>
<button @click="goBack">返回</button>
</div>`,
methods: {
goBack(){
this.$router.go(-1)
}
}
}
效果：
一文你带快速认识Vue-Router路由的更多相关文章
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue系列：Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫：完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue router路由（三）
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
- vue router路由跳转了，但是页面没有变（已解决）
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
随机推荐
- Jenkins软件平台安装部署
1.Jenkins软件平台概念剖解: 基于主流的Hudson/Jenkins平台工具实现全自动网站部署.网站测试.网站回滚会大大的减轻网站部署的成本,Jenkins的前身为Hudson,Hudson主 ...
- 2022-10-22 CSP赛前隔离时的模拟赛 2:3
T1 简单红题,不懈于写. 锐评:镜子反射出来的竟然没有镜像一下. T2 坑人东西调了 2h. 类似于 round1 的 T4. 线性 \(\Theta(n)\) 过. T3 T4 其实简单,负边权要 ...
- 一个重量级HTTP api的304优化分析与突发失效问题解决
背景 最近查看nginx log排查问题时,意外中发现重量级的主页 list api 304比例已暴跌至不到1%,之前该比例长期维持在30%以上,近期也未改动过相关逻辑,跟进后最终发现是服务端本地ca ...
- 资源迁移OSS方案记录
视频资源迁移到OSS服务器上,记录一下迁移过程. 搭建流程 在阿里云上购买oss,并获取具有该Bucket访问权限的AccessKey ID和AccessKey Secret信息. 数据迁移方案一 第 ...
- 对于goland相对较新一些版本新建项目时没有go mod模式选项的坑
前言 对于一些小白在网上看很早的一些go视频,使用goland2020.3.x版本或者其之前版本创建新项目,里面会有GO Modules(vgo)这个选项,也就是gomod模式创建新项目,然而对于现在 ...
- Java实现两字符串相似度算法
1.编辑距离 编辑距离:是衡量两个字符串之间差异的度量,它表示将一个字符串转换为另一个字符串所需的最少编辑操作次数(插入.删除.替换). 2.相似度 计算方法可以有多种,其中一种常见的方法是将编辑距离 ...
- CSP2023游击
Day-1 上车了,玩了一路. 到酒店里,玩了一晚上. Day 1 爆O! Day 2 走了,玩了一路. AF0了, 哎不是,谁给我反对了 考完了,心情不是很好 分数就不说出来了吧,太低了怕你们笑话我 ...
- 不懂乐理,也能扒谱,基于openvpi将mp3转换为midi乐谱(Python3.10)
所谓"扒谱"是指通过听歌或观看演奏视频等方式,逐步分析和还原音乐作品的曲谱或乐谱的过程.它是音乐学习和演奏的一种常见方法,通常由音乐爱好者.乐手或学生使用. 在扒谱的过程中,人们会 ...
- EventBus 简明教程
简介 EventBus 是一个用于 Android 和 Java 编程的 事件发布/订阅框架.使用 EventBus 进行事件传递,事件的发布和订阅就被充分解耦合,这使得编程人员从传统而原始的事件传递 ...
- Windows风格的个人网盘，支持文档在线编辑
这是一个Windows页面风格的个人网盘,支持普通文本.文档.表格.xmind等在线编辑,支持Windows的小组件,例如计算器.WhiteBoard.python 等,其他更多功能待你来发现,也待你 ...