文件目錄：

?

編輯router文件夾下的index.js文件

·?第一步：引用vue和vue-router ，Vue.use（VueRouter）

/* eslint-disable*/ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)

·第二步：引用定義好的路由組件

import ChildOne from '../components/childOne' import ChildTwo from '../components/childTwo'

?

·第三步：定義路由（路由對(duì)象包含路由名、路徑、組件、參數(shù)、子路由等），每一個(gè)路由映射到一個(gè)組件

·第四步：通過(guò)new Router來(lái)創(chuàng)建router實(shí)例

export default new Router({routes: [{path: '/one',name: 'ChildOne',component: ChildOne},{path: '/two',name: 'ChildTwo',component: ChildTwo}] })

?

在main.js文件上編輯

·第五步：在main.js中將路由實(shí)例掛載到vue根實(shí)例上，使得整個(gè)應(yīng)用都有路由功能，如下

import router from '../src/router/index.js' new Vue({el: '#app',router,components: { App },template: '<App/>' })

?

在組件文件上使用路由，編輯app.vue

·第六步：在組件中使用router-link 標(biāo)簽實(shí)現(xiàn)跳轉(zhuǎn)路由、使用router-view來(lái)實(shí)現(xiàn)路由顯示，如下

<template><div id="app"><div><img src="./assets/logo.png"></div><router-link to="/one">顯示第一個(gè)頁(yè)面</router-link><router-link to="/two">顯示第二個(gè)頁(yè)面</router-link><router-view></router-view></div> </template>

該demo中的childOne.vue組件文件

<template><div style="border:1px solid blue;color:blue"><p>這是子組件1的內(nèi)容!!!</p><p>!!!這是第1個(gè)路由的頁(yè)面!!!</p></div> </template>

childTwo.vue組件文件

<template><div style="border:1px solid blue;color:blue"><p>這是子組件2的內(nèi)容</p><p>這是第二個(gè)路由顯示的頁(yè)面怎么樣</p></div> </template>

注意：在組件中可以使用this.$router訪問(wèn)路由器，可以使用this.$route訪問(wèn)當(dāng)前路由；

實(shí)現(xiàn)效果：

?

路由嵌套：

使用方法：在router/index.js中定義路由對(duì)象時(shí)，使用children:[{...},{...}]的形式設(shè)置下級(jí)路由及映射組件，如下在one路由下設(shè)置了log和reg路由

export default new Router({routes: [{path: '/one',name: 'ChildOne',component: ChildOne,children:[{path:'log',component:Log,},{path:'reg',component:Reg,},],},{path: '/two',name: 'ChildTwo',component: ChildTwo}] })

childOne.vue中使用二級(jí)路由

<template><div style="border:1px solid red;color:red;"><p>這是子組件1的內(nèi)容</p><p>下面開(kāi)始點(diǎn)擊顯示嵌套的子路由 </p><router-link to="/one/log">顯示登錄頁(yè)面</router-link><router-link to="/one/reg">顯示注冊(cè)頁(yè)面</router-link><router-view></router-view></div> </template>

總結(jié)

以上是生活随笔為你收集整理的Vue-cli项目中路由的基础用法，以及路由嵌套的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。