VueRouter学习笔记1.0
VueRouter
官方定义
tip：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 — 官方定义
VueRouter 是 SPA（单页应用）的路径管理器，它允许我们通过不同的 URL 访问不同的内容
模块化打包系统下的安装
必须显式地通过Vue.use()来安装：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
基本使用
Vue.js + VueRouter构建应用
Vue.js让我们可以通过组合组件来组成应用程序
想要把VueRouter加进来，需要将component映射到routes
然后告诉VueRouter在哪里渲染它们。
VueRouter两个内置组件：
<router-link>：用于设置导航链接，切换不同HTML内容。to表示目标地址，即要显示的内容；<router-view>：渲染路由匹配到的组件内容；
使用例子：
<div id="app">
<div>
<router-link to="/index">首页</router-link>
<router-link to="/article">文章</router-link>
</div>
<router-view></router-view>
</div>
/*
定义组件 Index,Article
*/
const Index = Vue.component('index', {
template: '<div>Hello，欢迎使用慕课网学习 Vue 教程！</div>',
})
const Article = Vue.component('myArticle', {
template: `<ul><li>1. Vue 计算属性的学习</li><li>2. React 基础学习</li></ul>`,
})
/*
定义路由数组
*/
const routes = [
{ path: '/index', component: Index },
{ path: '/article', component: Article }
]
/*
使用路由数组，创建路由实例
*/
const router = new VueRouter({
routes: routes
})
/*
通过router配置注入路由
*/
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})
嵌套路由
/*
要配置嵌套路由，需要在配置的参数中使用children属性
*/
{
path: '路由地址',
component: '渲染组件',
children: [
{
path: '路由地址',
component: '渲染组件'
}
]
}
使用例子：
<div id="app">
<div>
<router-link to="/index">首页</router-link>
<router-link to="/article">文章</router-link>
</div>
<router-view></router-view>
</div>
const Index = Vue.component('index', {
template: '<div>Hello，欢迎使用慕课网学习 Vue 教程！</div>',
})
const Article = Vue.component('myArticle', {
template: `<div>
<div>
<router-link to="/article/vue">vue</router-link>
<router-link to="/article/react">react</router-link>
</div>
<router-view></router-view>
</div>`,
})
const VueArticle = Vue.component('vueArticle', {
template: `<ul><li>1. Vue 基础学习</li><li>2. Vue 项目实战</li></ul>`,
})
const ReactArticle = Vue.component('reactArticle', {
template: `<ul><li>1. React 基础学习</li><li>2. React 项目实战</li></ul>`,
})
const routes = [
{ path: '/index', component: Index },
{
path: '/article',
component: Article ,
children: [
{
path: 'vue',
component: VueArticle ,
},
{
path: 'react',
component: ReactArticle ,
}
]
}
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router,
data() {
return {}
}
不希望使用嵌套路径的情况
/*
以'/'开头的嵌套路径会被当作根路径
我们访问'/vueArticle'就相当于访问之前的'/article/vue'
*/
const routes = [
{ path: '/index', component: Index },
{
path: '/article',
component: Article ,
children: [
{
path: '/vueArticle',
component: VueArticle ,
},
{
path: '/reactArticle',
component: ReactArticle ,
}
]
}
]
编程式导航
重点：push、replace、go三种方法的使用与区别
router.push
有时候，我们可能需要通过onclick事件进行跳转，也就是通过JS跳转。
示例：
<div id="app">
<div>
<button @click="jump('index')">首页</button>
<button @click="jump('article')">文章</button>
</div>
<router-view></router-view>
</div>
/*
组件的定义
*/
const Index = Vue.component('index', {
template: '<div>Hello，欢迎使用慕课网学习 Vue 教程！</div>',
})
const Article = Vue.component('myArticle', {
template: `<ul><li>1. Vue 计算属性的学习</li><li>2. Vue 侦听器的学习</li></ul>`,
})
/*
路由数组
*/
const routes = [
{ path: '/index', component: Index },
{ path: '/article', component: Article }
]
/*
路由实例
*/
const router = new VueRouter({
routes: routes
})
/*
Vue实例
跳转函数的编写
push
*/
var vm = new Vue({
el: '#app',
router,
data() {
return {}
},
methods: {
jump(name) {
this.$router.push(name)
}
}
})
对象格式的参数
// 字符串形式的参数
router.push('home')
// 通过路径描述地址
router.push({ path: 'home' })
// 通过命名的路由描述地址
router.push({ name: 'user' }})
//还可以有其他属性，如查询参数params、query。
router.replace
和push唯一的不同：不会向history添加新纪录，而是跟它的方法名一样，替换当前的history记录。
示例：
/*
改写上一个示例
*/
methods: {
jump(name) {
this.$router.replace(name)
}
router.go
参数是一个整数，意思是history记录中前进或后退。
示例：
// 在浏览器记录中前进一步
router.go(1)
// 后退一步记录
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，路由将不会进行跳转
router.go(-100)
router.go(100)
命名路由
重点：如何定义命名路由、如何利用命名路由实现路由跳转。
定义
const router = new VueRouter({
routes: [
{
path: '/user',
name: 'user',
component: '[component-name]'
}
]
})
<router-link>跳转命名路由
实际上to属性可以接收一个对象
<router-link :to="{path: 'path'}">...</router-link>
<router-link :to="{name: 'name'}">...</router-link>
编程式导航跳转命名路由
methods: {
jump(name) {
this.$router.push({
name: name
})
}
}
命名视图
重点：定义命名视图、使用命名视图。
命名视图名
默认视图
之前的示例没有为<router-view/>指定一个name属性，实际上它有一个默认的属性default。
<router-view></router-view>
/*
默认视图名匹配组件
*/
const routes = [
{ path: '/index', components: {default: Index} },
{ path: '/article', components: {default: Article} }
]
具名视图
<router-view name="name"/>
const routes = [
{ path: '/index', components: {name: Index} },
{ path: '/article', components: {name: Article} }
]
路由别名和重定向
路由重定向
也是通过routes配置完成的，可以配置路由重定向到具体路由地址、具名路由或者动态返回重定向目标。
重定向至路由地址
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
示例：
const routes = [
{ path: '/', redirect: '/index' },
{ path: '/index', component: Index },
{ path: '/article', component: Article }
]
重定向至具名路由
const router = new VueRouter({
routes: [
{ path: '/a', redirect: {name: 'name'} }
]
})
动态返回重定向目标
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
示例：
const routes = [
{ path: '/', redirect: to => {
if(Math.random() > 0.5) {
return '/index'
}else {
return {
name: 'article'
}
}
}},
{ path: '/index', name: 'index', component: Index },
{ path: '/article', name: 'article', component: Article }
]
路由别名
/a的别名是/b，意味着，当用户访问/b时，URL会保持/b，但是路由匹配则为/a。
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
路由传参
包括params和query两种方式
params传参
- 定义路由及路由接收的参数；
- 路由跳转时传入对应参数；
路由参数：
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
]
<!-- router-link 跳转 -->
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}"> React 基础学习</router-link>
示例：
<div id="app">
<div>
<router-link to="/">首页</router-link>
</div>
<router-view></router-view>
</div>
/*
定义组件
*/
const Detail = Vue.component('detail', {
template: '<div>这是 {{$route.params.name}} 的详情页面</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li>
<router-link :to="{name: 'detail', params: {name: 'Vue 计算属性的学习'}}">
1. Vue 计算属性的学习
</router-link>
</li>
<li>
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}">
2. React 基础学习
</router-link>
</li>
</ul>`
})
/*
定义路由数组并创建路由实例
*/
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
使用$router的方式跳转：
// $router 跳转
this.$router.push({
name: 'detail',
params: {
name: 'Vue 教程'
}
})
示例：
const Article = Vue.component('myArticle', {
template: `<ul>
<li @click="getDetail('Vue 计算属性的学习')">
1. Vue 计算属性的学习
</li>
<li @click="getDetail('React 基础学习')">
2. React 基础学习
</li>
</ul>`,
methods: {
getDetail(name) {
this.$router.push({
name: 'detail',
params: {
name: name
}
})
}
}
})
query传参
方法较为简单，只需要在对应路由跳转的时候传入参数即可：
<!-- router-link 跳转 -->
<router-link :to="{path: '/detail', query: { id: 1 }}">2. React 基础学习</router-link>
/*
定义组件，并在组件中接收query参数
*/
const Detail = Vue.component('detail', {
template: '<div>这是 id 为 {{$route.query.id}} 的详情页面</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li>
<router-link :to="{path: '/detail', query: {id: 1}}">
1. Vue 计算属性的学习
</router-link>
</li>
<li>
<router-link :to="{path: '/detail', query: {id: 2}}">
2. React 基础学习
</router-link>
</li>
</ul>`
})
/*
使用$router的方式跳转路由
*/
this.$router.push({
path: '/detail',
query: {
id: 2
}
})
浙公网安备 33010602011771号