Vue.js的总结(1)vue-router

vue-router是Vue.js中提供全局路由(RESTful)的官方模块,该模块提供了注册全局路由的功能,可以支持传递参数,路由嵌套,重定向于别名, 钩子(中间件)等功能。

在vue-cli建立的Vue.js工程中,可以使用两种方式进行路由的定义和引入,如果是简单的工程,可以通过直接在main.js(入口主js)中引入,如下方代码所示。

  • 方法1
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import MessagePage from '@/组件地址'

Vue.config.productionTip = false


const routes = [
    {
        path: '/message', component: MessagePage,
    }
]
const router = new VueRouter({
    routes,
    mode: "history"//去除锚点符号使用HTML5中的history模式
})
Vue.use(VueRouter)
new Vue({
    render: h => h(App),
    router
}).$mount('#app')

当然需要在App.vue或者你挂载根节点的文件中加上该路由显示的节点,如下代码所示。

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App',
        components: {}
    }
</script>

<style>

</style>
  • 方法2

或者可以定义单独的JavaScript文件用于路由的定义,该路由文件的定义位置为/router/路由文件.js,这里的路径可以随便更改,只需要在main.js中更改相关的内容即可。

import Vue from 'vue'
import VueRouter from 'vue-router'
import MessagePage from '@/page/Message.vue'

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
        {
            path: '/message', component: MessagePage,
        }
    ],
    mode: "history"//去除锚点符号
})

该方法需要在main.js中引入,如下所示,顺带一说这里采用了export default进行抛出,所以在import进行引入时不需要特定指定命名,如果命名为router,则 可以使用简洁的引入办法,不需要指定对象。

import Vue from 'vue'
import App from './App.vue'
import MRouter from './router/message-router'


Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    router: MRouter
}).$mount('#app')

当然这两种方法都需要对于根节点进行挂载,同方法1。

链接