這篇文章主要介紹了關於使用vue-router完成簡單的導航功能，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
vue-router是Vue. js官方提供的一套專用的路由工具庫。這篇文章主要介紹了使用vue-router完成簡單導航功能,需要的朋友可以參考下
vue-router是Vue.js官方提供的一套專用的路由工具庫
安裝指令如下
vue-router 實例是一個Vue插件，我們需要在Vue全域參考中透過Vue.use() 將它連接到Vue實例中。
在我們的工程中，,main.js是預設的程式入口文件，所有的全域設定都會在這個文件中進行。
我們在main.js中加入以下引用
import VueRouter from 'vue-router'
Vue.use(VueRouter)
登入後複製
這樣就完成了 vue-router最基本的安裝工作了。
接下來我們要實現的功能描述如下
在首頁上有兩個連結分別是：購物車和個人中心
點擊不同的連結顯示不同的內容
首先我們在src 目錄下建立兩個元件檔案：Cart.vue Me.vue
新建的兩個元件檔案的內容暫時都是同樣的結構
<template>
<!-- 这个p里面的内容可设置不同以区分 -->
<p>购物车</p>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>登入後複製
接下來就是在main.js檔案中定義路由與這些元件之間的匹配規則了。
VueRouter的定義非常簡單：建立一個VueRouter實例，將路由path指定到一個元件類型上
如下程式碼所示（main.js）
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//将页面组件与path指令的路由关联
{path:'/cart',component:Cart},
{path:'/me',component:Me}
]
})
new Vue({
el: '#app',
//将路由实例添加到Vue实例中去
router,
render: h => h(App)
})登入後複製
我們可以將上面的路由相關的程式碼提取出來放在另外的一個routes.js檔案中去，防止main.js檔案的內容越來越長。
新建一個 config 資料夾，然後將routes.js檔案加入進去。
則routes.js程式碼如下
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//将页面组件与path指令的路由关联
{path:'/cart',component:Cart},
{path:'/me',component:Me}
]
})
export default router;登入後複製
#然後main.js檔案程式碼就減少到如下：
##
import Vue from 'vue'
import App from './App.vue'
import router from './config/routes'
new Vue({
el: '#app',
//将路由实例添加到Vue实例中去
router,
render: h => h(App)
})登入後複製
vue-router 提供了兩個指令標籤
: 渲染路徑匹配到的視圖元件 : 支援使用者在具有路由功能的應用程式中導航
在有了上面的兩個指令標籤，我們就可以在程式入口App.vue編寫對應的程式碼了：
<template>
<p id="app">
<p class="tabs">
<ul>
<li>
<router-link to ="/cart">
<p>购物车</p>
</router-link>
</li>
<li>
<router-link to ="/me">
<p>个人中心</p>
</router-link>
</li>
</ul>
</p>
<p class="content">
<!-- 使用 router-view 渲染视图 -->
<router-view></router-view>
</p>
</p>
</template>
<script>
export default {
name: "app"
};
</script>
<style lang="scss"></style>登入後複製
到此上面的程式碼已經實現了預期的功能了。
然後我們看to ="/cart"這個裡面的路徑其實已經在
{path:'/cart',component:Cart}定義過了，如果需要修改，就得需要這兩個地方同時修改（如果有其他地方用的就改動的更多）
那麼直接將
{path:'/cart',component:Cart}中的路徑取出來豈不是很好。
這時候我們的vue-router提供了一種隱式的路由引用方式，稱為－ 命名路由
簡單來說就是透過路由的名稱引用來取代Url
於是VueRouter的設定碼改為如下：
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//将页面组件与path指令的路由关联
{name:'cart',path:'/cart',component:Cart},
{name:'me',path:'/me',component:Me}
]
})登入後複製
這樣我們在
的to屬性使用v-bind綁定到Vue實例中，然後透過名稱直接得到Url了
於是App.vue中的連結部分的程式碼改為如下
<li>
<router-link :to ="{name:'cart'}">
<p>购物车</p>
</router-link>
</li>
<li>
<router-link :to ="{name:'me'}">
<p>个人中心</p>
</router-link>
</li>登入後複製
至此，使用vue-router完成了簡單導航功能
說明
預設渲染成有正確連結的標籤，也可以透過配置tag 屬性產生別的標籤例如
#
<li>
<router-link :to ="{name:'cart'}" tag="span">
<p>购物车</p>
</router-link>
</li>登入後複製
關於vue使用Element元件時v-for迴圈裡的表單項目驗證的方法
## Vue實作textarea固定輸入行數與新增底線樣式的想法
以上是使用vue-router完成簡單的導航功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
