一、說(shuō)明

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有：

嵌套的路由/視圖表 模塊化的、基于組件的路由配置 路由參數(shù)、查詢、通配符 基于Vue js過(guò)渡系統(tǒng)的視圖過(guò)渡效果 細(xì)粒度的導(dǎo)航控制 帶有自動(dòng)激活的CSS class的鏈接 HTML5 歷史模式或hash模式， 在IE 9中自動(dòng)降級(jí) 自定義的滾動(dòng)行為 二、安裝

基于第一個(gè)vue-cli進(jìn)行測(cè)試學(xué)習(xí)； 先查看node modules中是否存在vue-routervue-router是一個(gè)插件包， 所以我們還是需要用npm/cnpm來(lái)進(jìn)行安裝的。打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目目錄，輸入下面命令。

npm install vue-router --save-dev

如果在一個(gè)模塊化工程中使用它，必須要通過(guò)Vue.use()明確地安裝路由功能：

import Vue from ’vue’import VueRouter from ’vue-router’Vue.use(VueRouter); 三、測(cè)試

1、先刪除沒(méi)有用的東西2、components 目錄下存放我們自己編寫(xiě)的組件3、定義一個(gè)Content.vue 的組件

<template><div><h1>內(nèi)容頁(yè)</h1></div></template><script>export default {name:'Content'}</script>

Main.vue組件

<template><div><h1>首頁(yè)</h1></div></template><script>export default {name:'Main'}</script>

4、安裝路由，在src目錄下，新建一個(gè)文件夾：router，專門存放路由，配置路由index.js，如下

import Vue from’vue’//導(dǎo)入路由插件import Router from ’vue-router’//導(dǎo)入上面定義的組件import Content from ’../components/Content’import Main from ’../components/Main’//安裝路由Vue.use(Router) ;//配置路由export default new Router({routes:[{//路由路徑path:’/content’,//路由名稱name:’content’,//跳轉(zhuǎn)到組件component:Content}, {//路由路徑path:’/main’,//路由名稱name:’main’,//跳轉(zhuǎn)到組件component:Main}]});

5、在main.js中配置路由

import Vue from ’vue’import App from ’./App’//導(dǎo)入上面創(chuàng)建的路由配置目錄import router from ’./router’//自動(dòng)掃描里面的路由配置//來(lái)關(guān)閉生產(chǎn)模式下給出的提示Vue.config.productionTip = false;new Vue({el:'#app',//配置路由router,components:{App},template:’<App/>’});

6、在App.vue中使用路由

<template><div id='app'><!--router-link：默認(rèn)會(huì)被渲染成一個(gè)<a>標(biāo)簽，to屬性為指定鏈接router-view：用于渲染路由匹配到的組件--><router-link to='/main'>首頁(yè)</router-link><router-link to='/content'>內(nèi)容</router-link><router-view></router-view></div></template><script>export default{name:’App’}</script><style></style>

以上就是Vue-router路由該如何使用的詳細(xì)內(nèi)容，更多關(guān)于Vue-router路由使用的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！