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),订阅者触发响应的回调(面试题标准答案)

标签

评论