Vue 路由

路由 vue-router

参数 name使用:

路由配置:
import Main from './views/Main'
routes: [
    {
        path: '/main',
        name: 'main',  # 为该路由起名,通过name即可指定该路由
        component: Main
    }
] 

 

视图使用:
1):
<router-link :to="{name: 'main'}">主页</router-link>


2):
this.$router.push({
    name:'course-detail',
});

 

补充 : router-link与系统a标签的区别

router-link：会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换
a：也可以完成同样的效果，但是会发生页面的转跳

 

路由传参

第一种:

router.js

routes: [
    // ...
    {
        path: '/course/:id/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]

注意:
// path如果是通过to直接访问，路由必须完全对应
// :id代表可以完成任意内容匹配，用变量id保存

 

跳转.vue

<template>
    <!-- 1.标签跳转 -->
    <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</template>

<script>
    // ...
    goDetail() {
        // 2.逻辑跳转
        this.$router.push(`/course/${this.course.id}/detail`);
    }
</script>

 

接收.vue

created() {
    let id = this.$route.params.id;
}

第二种:

router.js

routes: [
    // ...
    {
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]

 

跳转.vue

<template>
    <!-- 1.标签跳转 -->
    <router-link :to="{
            name: 'course-detail',
            query: {id: course.id}
        }">{{ course.name }}</router-link>
</template>

<script>
    // ...
    goDetail() {
        // 2.逻辑跳转
        this.$router.push({
            name: 'course-detail',
            query: {
                id: this.course.id
            }
        });
    }
</script>

 

接收.vue

created() {
    let id = this.$route.query.id;
}

 

补充:

方法 go

methods: {
   goPage() {
     // 返回上两页
     this.$router.go(-2);

    // 前进一页
    this.$router.go(1);          
   }
 }

 

跨组件传参的四种方式

// 1) localStorage：永久存储数据

　　　　this.cTitle && (localStorage.cTitle = this.cTitle);

// 2) sessionStorage：临时存储数据(刷新页面数据不重置，关闭再重新开启标签页数据重置)
// 3) cookie：临时或永久存储数据(由过期时间决定)
// 4) vuex的仓库(store.js)：临时存储数据(刷新页面数据重置)

 

vuex 方式:

store.js

export default new Vuex.Store({
    state: {
        cTitle:'课程页',
        hTitle:'主页'
    },
    mutations: {},
    actions: {}
})

 

SetTitle.vue

<template>
    <div>
        <Nav></Nav>
        <p>
            修改课程页标题 <input type="text" v-model="cTitle">
            <button @click="changeCTitle">修改</button>
        </p>
        <p>
            修改主页标题 <input type="text" v-model="hTitle">
            <button @click="changeHTitle">修改</button>
        </p>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'

    export default {
        name: "SetTitle",
        components: {
            Nav
        },
        data() {
            return {
                cTitle: '',
                hTitle: '',
            }
        },
        methods: {
            changeCTitle() {
                this.$store.state.cTitle = this.cTitle;
　　　　　　　　　　// this.$store.state.cTitle 就可以拿到vuex仓库中state内的值
　　　　　　　　　　// store是vue实例的成员
                // this.$store.commit('setCTitle', this.cTitle);
            },
            changeHTitle(){
                this.hTitle && (localStorage.hTitle = this.hTitle);
            }
        }
    }
</script>

<style scoped>

</style>

总结:

 在任意组件中给仓库变量赋值

this.$store.state.title = 'newTitle'
this.$store.commit('setTitle', 'newTitle')

在任意组件中取仓库变量的值

console.log(this.$store.state.title)