VUE:路由

VUE:路由

一、说明

  1)官方提供的用来实现SPA的vue插件

  2)github:https://github.com/vuejs/vue-router

  3)中文文档:http://router.vuejs.org/zh-cn/

  4)下载:npm install vue-router --save

二、相关API

 1)VueRouter():用于创建路由器的构建函数  

new VueRouter{{
    //多个配置项
}}

 2)路由配置:

routes:[
    {//一般路由
        path:'/about',
        component:About
    },
    {//自动跳转路由
        path:'/',
        redirect:'/about'
    },
]

 3)注册路由器:

import router from './router'
new Vue({
    router
})

 4)使用路由组件标签

  1.<router-link>:用来生成路由链接

    <router-link to='/xxx'>Go to XXX</router-link>

  2.<router-view>:用来显示当前路由组件界面

    <router-view></router-view>

三、基本路由

<template>
    <div>
        About
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style>
</style>
About.vue
<template>
    <div>
        Home
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style>
</style>
Home.vue
<template>
    <div>
        <div>
            <h2>Taosir is studying...</h2></div>
        <div>
            <router-link to="/about">About</router-link>
            <router-link to="/home">Home</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>

</style>
App.vue
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({    //配置对象的属性名都是一些确定的名称,不能随便修改
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  router
})
main.js
/*
 * 路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../views/About.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

export default new VueRouter({
    //n个路由
    routes:[
        {
            path:'/about',
            component:About
        },{
            path:'/home',
            component:Home
        },{
            path:'/',
            redirect:'/about'
        }
    ]
})
index.js

 四、嵌套路由

在上面的基础上Home加了一层嵌套

<template>
    <div>
        <ul>
            <li v-for="(news,index) in newsArr" :key="index">{{news}}</li>
        </ul>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                newsArr:['news001','news002','news003','news004']
            }
        }
    }
</script>

<style>
</style>
News.vue
<template>
    <div>
        <ul>
            <li v-for="(message,index) in messages" :key="message.id">
                <a href="???">{{message.title}}</a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                messages:[]
            }
        },
        mounted(){
            //模拟ajax请求从后台获取数据
            setTimeout(()=>{
                const messages=[
                    {
                        id:1,
                        title:'message001',
                    },{
                        id:3,
                        title:'message003',
                    },{
                        id:5,
                        title:'message005',
                    }
                ]
                this.messages=messages
            },1000)
        }
    }
</script>

<style>
</style>
Message.vue
<template>
    <div>
        <h2>Home</h2>
        <div>
            <ul>
                <li><router-link to="/home/news">News</router-link></li>
                <li><router-link to="/home/message">Message</router-link></li>
            </ul>
            <div>
                <router-view></router-view>
                <hr />
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style>
</style>
Home.vue
/*
 * 路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'

Vue.use(VueRouter)

export default new VueRouter({
    //n个路由
    routes:[
        {
            path:'/about',
            component:About
        },{
            path:'/home',
            component:Home,
            children:[
                {
                    path:'/home/news',
                    component:News
                },{
                    path:'message',
                    component:Message
                },{
                    path:"",
                    redirect:"/home/news"
                }
            ]
        },{
            path:'/',
            redirect:'/about'
        }
    ]
})
index.js
    <style>
        .router-link-active{
            color:red !important;
        }
    </style>
在index.html加入该样式可以使选中的变红

 五、缓存路由的实现

<keep-alive>
    <router-view></router-view>
</keep-alive>

六、向路由组件传参

 

 

 

 

1)通过path

2)通过标签<router-view>

 

<template>
    <div>
        <p>ID:{{$route.params.id}}</p>
        <ul>
            <li>id:{{messageDetail.id}}</li>
            <li>title:{{messageDetail.title}}</li>
            <li>content:{{messageDetail.content}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                messageDetail: {}
            }
        },
        mounted() {
            setTimeout(() => {
                const allMessageDetails = [{
                    id: 1,
                    title: 'message001',
                    content: 'message001 content...'
                }, {
                    id: 2,
                    title: 'message002',
                    content: 'message002 content...'
                }, {
                    id: 4,
                    title: 'message004',
                    content: 'message004 content...'
                }]
                this.allMessageDetails=allMessageDetails
                const id=this.$route.params.id*1
                this.messageDetail=allMessageDetails.find(detail=>detail.id===id)
            },1000)
        },
        watch:{
            $route:function(value){//路由路径(param)发生了改变
                const id=value.params.id*1
                this.messageDetail=this.allMessageDetails.find(detail=>detail.id===id)    
            }
        }
    }
</script>

<style>

</style>
MessageDetail.vue
/*
 * 路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
import MessageDetail from '../views/MessageDetail.vue'

Vue.use(VueRouter)

export default new VueRouter({
    //n个路由
    routes:[
        {
            path:'/about',
            component:About
        },{
            path:'/home',
            component:Home,
            children:[
                {
                    path:'/home/news',
                    component:News
                },{
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail/:id',
                            component:MessageDetail
                        }
                    ]
                },{
                    path:"",
                    redirect:"/home/news"
                }
            ]
        },{
            path:'/',
            redirect:'/about'
        }
    ]
})
index.js
<template>
    <div>
        <ul>
            <li v-for="(message,index) in messages" :key="message.id">
                <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
            </li>
        </ul>
        <hr />
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                messages:[]
            }
        },
        mounted(){
            //模拟ajax请求从后台获取数据
            setTimeout(()=>{
                const messages=[
                    {
                        id:1,
                        title:'message001',
                    },{
                        id:2,
                        title:'message002',
                    },{
                        id:4,
                        title:'message004',
                    }
                ]
                this.messages=messages
            },1000)
        }
    }
</script>

<style>
</style>
Message.vue
<template>
    <div>
        <div>
            <h2>Taosir is studying...</h2></div>
        <div>
            <router-link to="/about">About</router-link>
            <router-link to="/home">Home</router-link>
        </div>
        <div>
            <router-view msg="abc"></router-view>
        </div>
    </div>
    </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>

</style>
App.vue
<template>
    <div>
        <h2>About</h2>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default{
        props:{
            msg:String
        }
    }
</script>

<style>
</style>
About.vue

七、编程式路由导航

<template>
    <div>
        <ul>
            <li v-for="(message,index) in messages" :key="message.id">
                <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
                <button @click="pushShow(message.id)">push查看</button>
                <button @click="replaceShow(message.id)">replace查看</button>
            </li>
        </ul>
        <button @click="$router.back()">回退</button>
        <hr />
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                messages:[]
            }
        },
        mounted(){
            //模拟ajax请求从后台获取数据
            setTimeout(()=>{
                const messages=[
                    {
                        id:1,
                        title:'message001',
                    },{
                        id:2,
                        title:'message002',
                    },{
                        id:4,
                        title:'message004',
                    }
                ]
                this.messages=messages
            },1000)
        },
        
        methods:{
            pushShow(id){
                this.$router.push(`/home/message/detail/${id}`)
            },
            replaceShow(id){
                this.$router.replace(`/home/message/detail/${id}`)
            }
        }
    }
</script>

<style>
</style>

1)this.$router.push(path):相当于点击路由链接(可以返回到当前的路由界面)

2)this.$router.replace(path):用新路由替换当前路由(不可以返回当前的路由界面)

3)this.$router.back():请求(返回)上一个记录路由

4)this.$router.go(1):请求(返回)上一个记录路由

posted @ 2018-11-16 23:28  涛先森の日常  阅读(234)  评论(0编辑  收藏  举报