Vue Router 试探

cover

在这篇记一次VUE开发环境搭建文章中我记录了一些Vue开发环境搭建的东西，最近接触了一些关于Router的内容，在这里做一个记录和分享。

相关设置

稍微理了一下结构，如图

逻辑梳理

首先我们在main.js里初始化Vue：

import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'

new Vue({
    router,
    el: '#app',
    render: h => h(App)
})

在App.vue里设置router-view以便使用Router

<template>
<div id="app" v-cloak>
    <router-view class="view" keep-alive transition transition-mode="out-in"></router-view>
</div>
</template>

<script>
export default {
  components: {}
}
</script>
<style>
[v-cloak] {
    display: none;
}
</style>

line 3 设置router-view

line 2里的v-cloak配合line 13~15保证不会在加载的时候出现带有双{}的符号。

设置router, routes.js:

import Vue from 'vue'
import Router from 'vue-router'
import home from './pages/home.vue'
import test from './pages/test.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:home
        },
        {
            path:'/test',
            component:test
        }
    ]
})

这里将页面映射到相应的path上，比如/test就对应了test.vue。

使用

比如我们点击后跳转到另一个页面，就可以像下面这样使用：

<template>
<div>
    <div @click="view">{{msg}}</div>
</div>
</template>

<script>
export default {
    data() {
        return {
            msg: "Hello tom."
        };
    },
    methods:{
        view() {
            this.$router.push({
                path: "/test",
                query: {
                    name:'tom'
                }
            })
        }
    }
}
</script>

<style lang="scss">
</style>

query是传参数用的，可以在下一个页面通过this.$route.query.name获取。

可以通过this.$router.back(-1)手动返回。

这里就是我初次试探Router的内容，这些对应基本的页面来说已经够用了。

参考

• Vue2+VueRouter2+webpack 构建项目实战（一）准备工作