20201016李权
编程式导航：
在使用Vue Router时，我们通常通过router-link标签去生成跳转到指定路由的链接，但是在实际开发中，更多的是通过JavaScript的方式进行跳转，
举个列子，当我们用户调教表单时候，提交成功，返回上一页面，提交失败，留在当前页面，如果我们使用router-link肯定就不好了，所以我们要通过javascript 根据表单返回的状态进行交互
在使用Vue Router实例化对象的时候并且挂载到Vue的实例对象，会自动生成两个对象 this.\(router(路由对象)，和this.\)route(当前页面的路由信息)，我们可以通过路由对象也就是this.$router实例方法，通过JavaScript代码的方式进行路由之间的跳转，而这就是编程导航。
在Vue Router有三种导航方法：分别为push,replace和go，最常见的是通过在页面上设置router-link标签进行路由地址间的跳转，等同于执行了一次push
push方法：
当需要跳转新页面的时候，可以通过push方法将一条新的路由记录添加到浏览器的history栈中，通过history的特性，从而驱使浏览器页面进行跳转，同时因为在history会话历史中会一直保存这个浏览器记录，所以可以返回上一页面，
在push方法中，参数可以是一个字符串的路径，也可以是一个对象。
第一种：
this.$router.push({
name:'info',
params:{
email:this.email,
password:this.password
}
})
//这是第二种
this.$router.push({
path:`/info/${this.emali}/${this.password}`
})
go方法：
当使用go方法的时候，可以在history的记录中向前或向后退多少步，也就是说通过go方法可以在已经存储的history路由历史中来回跳转。
this.$router.go(1)
replace方法：
使用replace的方法，是替换当前的页面，不会保存上一条的浏览器记录，所以无法通过后退按钮返回上一步的操作
this.$router.replace({
path:'info'
})
一个小实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="handOne">第一页面</button>
<button @click ="handTwo">第二页面</button>
<button @click="handThree">第三页面</button>
<button @click="handFour">第四页面</button>
<button @click="handFive">第五页面</button>
<div>
<router-view></router-view>
</div>
</div>
<template id="one">
<div>
<h1>这是第一页面</h1>
</div>
</template>
<template id="two">
<div>
<h2>这是第二页面</h2>
</div>
</template>
<template id="three">
<div>
<h3>这是第三页面</h3>
</div>
</template>
<template id="four">
<div>
<h1>这是第四页面</h1>
</div>
</template>
<template id="five">
<div>
<h1>这是第五页面</h1>
</div>
</template>
<script src="../vue-router-dev/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.use(VueRouter)
//1.创建路由模板
const one = {
template:'#one'
}
const two = {
template:'#two'
}
const three = {
template:'#three'
}
const four ={
template:'#four'
}
const five = {
template:'#five'
}
//2.配置路由
const routes = [
{
path:'/',
redirect:'/one'
},
{
path:'/one',
name:'one',
component:one,
},
{
path:'/two',
name:'two',
component:two
},
{
path:'/three',
name:'three',
component:three
},
{
path:'/four',
name:'four',
component:four
},
{
path:'/five',
name:'five',
component:five
}
]
//3.实例化VueRouter对象
const router = new VueRouter({
routes,
})
//4.将对象挂载到Vue实例的对象上去
new Vue({
el:'#app',
data(){
return{}
},
methods: {
handOne(){
this.$router.push({
path:'/one'
})
},
handTwo(){
this.$router.push({
path:'/two'
})
},
handThree(){
this.$router.push({
path:'/three'
})
},
handFour(){
this.$router.push({
path:'/four'
})
},
handFive(){
this.$router.push({
path:'/five'
})
}
},
router
})
</script>
</body>
</html>
组件和VueRouter解耦：
在使用路由的时候，将组件和VueRouter强行绑在了一起，如果我们想要获取参数，必须使用VUeRouter实例，
使组件只能在某些特定的URL上使用，限制了灵活性
布尔模式解耦：
定义路由模板的时候，指定需要传递的参数是props中的一个数据项，然后在定义路由的规则时候，指定props属性为true，即可实现VueRouter之间的通信，并且注意：props的值的名字和传递参数的名字是一样的
一个关于布尔模式解耦的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="handOne">第一页面</button>
<button @click ="handTwo">第二页面</button>
<button @click="handThree">第三页面</button>
<button @click="handFour">第四页面</button>
<button @click="handFive">第五页面</button>
<div>
<router-view></router-view>
</div>
</div>
<template id="one">
<div>
<h1>这是第一页面</h1>
</div>
</template>
<template id="two">
<div>
<h2>这是第二页面</h2>
</div>
</template>
<template id="three">
</template>
<template id="four">
<div>
<h1>这是第四页面</h1>
</div>
</template>
<template id="five">
<div>
<h1>这是第五页面</h1>
</div>
</template>
<script src="../vue-router-dev/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.use(VueRouter)
//1.创建路由模板
const one = {
template:'#one'
}
const two = {
template:'#two'
}
const three = {
props:['num'],
template:`
<div>
<h3>这是第三页面 {{num}}</h3>
</div>`
,
}
const four ={
template:'#four'
}
const five = {
template:'#five'
}
//2.配置路由
const routes = [
{
path:'/',
redirect:'/one'
},
{
path:'/one',
name:'one',
component:one,
},
{
path:'/two',
name:'two',
component:two
},
{
path:'/three/:num',
component:three,
//布尔模式解耦
props:true
},
{
path:'/four',
name:'four',
component:four
},
{
path:'/five',
name:'five',
component:five
}
]
//3.实例化VueRouter对象
const router = new VueRouter({
routes,
})
//4.将对象挂载到Vue实例的对象上去
new Vue({
el:'#app',
data(){
return{}
},
methods: {
handOne(){
this.$router.push({
path:'/one'
})
},
handTwo(){
this.$router.push({
path:'/two'
})
},
handThree(){
this.$router.push({
path:'/three',
})
},
handFour(){
this.$router.push({
path:'/four'
})
},
handFive(){
this.$router.push({
path:'/five'
})
}
},
router
})
</script>
</body>
</html>
对象模式解耦：
在配置路由的规则时候，除了将props的属性值为true时，props的值还可以是一个·对象或者函数，
将props的值设定为一个对象的时候，不管传参的值是什么，最终获取的值都是对象的值
const third = {
props:['name'],
template:'<h3>第三页的内容 {{name}}</h3>'
}
const router = new VueRouter({
props:[{
path:'/third/:name'
component:third,
props:{
name:'liquan'
}
}]
})
const vm = new Vue({
el:'#app',
data(){return{}},
props:['name']
router,
methods:{
three(){
this.$router.push({
path:'/third'
})
}
}
})
函数模式解耦：
在对象模式解耦中，我们只能使用静态的props属性值，就是不管你传参的值是什么，传过去的值都是对象的值，
但是使用函数模型解耦，就可以使与路由传参的值相结合
代码：
const third = {
props:['name','id'],
template:'<h3>第三页的内容 {{name}}{{id}}</h3>'
}
const router = new VueRouter({
props:[{
path:'/third'
component:third,
props:(route)=>{
id:route.query.id
name:'李权'
}
}]
})
const vm = new Vue({
el:'#app',
data(){return{}},
props:['name']
router,
methods:{
three(){
this.$router.push({
path:'/third'
})
}
}
})
配置路由的规则的一个简写写法：
如果当我们在一个主页面用多个router-link标签的时候，我们可以用v-for来遍历route定义的规则，我们就得把配置router的规则的那个文件单独提出来，然后导出来，详情看代码
把routes文件导出来的代码：
//配置路由规则的文件
const routes = [
{path:'/',redirect:'/home'},
{path:'/home', name:'Home'},
{path:'/about', name:'About'},
{path:'/admin',name:'Admin'}
]
export default routes
然后在 router的文件夹下index文件中
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入我们的routes文件
import routerList from './routerList'
Vue.use(VueRouter)
//对我们的routerList添加组件通过数组的映射
let routes = routerList.map(item=>{
item.component = ()=> import ('../views/'+item.name)
return item;
})
const router = new VueRouter({
routes
})
export default router
在App的文件中
<template>
<div id="app">
<div id="nav">
<router-link v-for="item in List" :to="item.path">{{item.name}}</router-link>
</div>
<router-view/>
</div>
</template>
<script>
import List from './router/routerList'
export default {
name:'App',
data(){
return{
List,
}
}
}
</script>
<style lang="less">
</style>
单页面路由：
直接在页面中写一个router-view,就不会显示其他页面，然后在其他需要返回的页面中增加一个共同的组件就行了
③双向绑定原理
第一种说法：vue双向绑定的原理主要是通过数据劫持object.defineProperty和发布订阅者模式实现的，通过object.defineProperty监听数据发行变化然后通知订阅者(watcher),订阅者触发响应的回调(面试题标准答案)
近期评论