vue-router用法

1.在main.js中引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

2.在main.js中使用这个router插件

Vue.use(VueRouter)

3.生成这个router实例

export default new Router(){
    routes:[
        {
            path:'/',
            name:'home',
            component:Home
        },{
            path:'/list',
            name:'list',
            component:List
        }
    ]
}

4.在index.js中把路由实例传递给Vue根组件

import router from './router'

new Vue({
    el:'#app',
    router,
    template:'<APP/>',
    components:{ APP }
})

静态路由

静态配置的 ---> import ....

固定路径路由的配置

{
    path:'/',
    name:'home',
    component:Home
},{
    path:'/list',
    name:'list',
    component:List
}

动态路由匹配

只有动态路由可以做到分页的效果

//localhost:8080/#/list/2 index,js

{
    path:'/list/:id',
    name:'list',
    component:List
}

list.vue

<template>
    <div>{{title}}</div>
</template>

<script>

    data(){
        return {
            title:""
        }
    }

    export default{
        mounted(){
            if(this.$route.params.id == 1){
                //请求第一页数据
                this.title="第一页"
            }
            if(this.$route.params.id == 2){
                //请求第二页数据
                this.title="第二页"
            }
        }
    }
</script>

接收多个个参数

index.js

{
        path:'/list/:id/name/:name',
        name:'list',
        component:List
    }

list.vue

<template>
    <div>{{title}}{{name}}</div>
</template>

<script>

    data(){
        return {
            title:"",
            name:""
        }
    }

    export default{
        mounted(){
            //结构赋值写法
            const {name,id} = this.$route.params;
            this.name = name;
            
            //this.name = this.$route.params.name;
            if(this.$route.params.id == 1){
                //请求第一页数据
                this.title="第一页"
            }
            if(this.$route.params.id == 2){
                //请求第二页数据
                this.title="第二页"
            }
        }
    }
</script>

传递不同参数 显示不同数据

项目应用：详情页

watch 响应路由参数的变化

监听路由的变化

watch:{
    '$route'(to,from){
        this.name = to.params.name;
    }
}

在2.2中引入守卫（ beforeRouteUpdate）

守卫 --> 钩子函数

beforeRouteUpdate (to, from, next) {
    this.name = to.params.name;
    next();//走到下一个钩子
}

嵌套路由

头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做

{
        path:'/list',
        name:'list',
        component:List,
        childeren:[{
            path:'a',
            component:A
        }]
    }

再引入一个A组件 A.vue

在list.vue组件中通过，<router-view>显示A组件的内容

在一个非app组件里面写<router-view>显示的是当前路由下子组件的内容

编程式的导航

除了<router-link>来创建a标签来定义导航链接，还可以借助router的实例方法

router.push(location,onCompelte?,onAbort?)

在Vue实例内部，可以通过$route访问路由实例，因此你可以调用this.$route.push

想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。

当你点击<route-link>时，这个方法会在内部调用，所以说，

点击<route-link:to="..."> ---> 声明式

等同于

调用router.push(...) ---> 编程式

可以在Header组件中跳转到list中

export defalut{
    methods:{
        handleClick(){
            this.$router.push({
                name:'list'
                
            })
        }
    }
}

可以在Header组件中跳转到list/123中

export defalut{
    methods:{
        handleClick(){
            this.$router.push({
                //一种方式
                //path:'/list/123',
                
                
                //2种方式
                name:'list'
                params:{
                    id:123
                }
            })
        }
    }
}

使用router.push 或者 router.replace 里面都不能让path和params同时存在

//字符串

router.push('home');

//对象

router.push({path:'home'})

//命名的路由

router.push({name:'user',params:{userId:123}})

//带查询参数，变成/register?plan=private
router.push({path:'register',query:{plan:'private'}})

router.replace

和router.push唯一的不同就是，不会向history添加新纪录，而是替换掉当前的history记录 不能返回

router.go

命名路由

定义名字跳转

命名视图

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>


var app = new VueRouter({
    routers:[{
        path:'/',
        componens:{
            defaults:Foo,
            a:Bar,
            b:Baz
        }
    }]
    
})

重定向和别名

访问/abc 重定向到/根路径

{
    path:'/abc',
    redirect:'/'
}

访问/bieming 实际上还是访问的根路径

{
    path:'/',
    name:'home',
    component:Home,
    alias:'/bieming'
}

路由组件传参

解耦

动态路由传id

{
        path:'/list/:id',
        name:'list',
        component:List,
        props:true
    }

在list.vue中

可以直接通过props['id']获取数据

<template>
    <div>{{id}}</div>
</template>

<script>

    export default{
       props['id']
    }
</script>

对象模式

props:{name:"dell"}

一般是写死的字符串静态数据

函数模式

index.js

{
        path:'/list/:id',
        name:'list',
        component:List,
        props : (route)=>({
            query:route.query.q
            id:route.params.id
        })
    }

list.vue

<template>
    <div>{{query}}</div>
    <div>{{id}}</div>
</template>

<script>

    export default{
       props['query','id']
    }
</script>