美文网首页程序员
Vue Router 试探

Vue Router 试探

作者: tomfriwel | 来源:发表于2018-08-17 17:35 被阅读8次
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的内容,这些对应基本的页面来说已经够用了。

参考

相关文章

网友评论

    本文标题:Vue Router 试探

    本文链接:https://www.haomeiwen.com/subject/wuytiftx.html