vue router 路由和元件

vue-router 是 vue 中需要學習的乙個重要部分, 下面我來與大家分享下自己的經驗

v-model="currentid"

fixed>
id="home">
slot="icon"
:src="currentid == 'home'">
首頁mt-tab-item>
id="discover">
slot="icon"
:src="currentid == 'discover'">
發現mt-tab-item>
id="order">
slot="icon"
:src="currentid == 'order'">
訂單mt-tab-item>
id="profile">
slot="icon"
:src="currentid == 'profile'">
我的mt-tab-item>
mt-tabbar>
template>
export default 
},watch: 
}};script>

首先建立乙個檔案main.vue做為所有頁面的主路由, 各個頁面的公共模組都放在這個檔案裡面

然後將底部的公共元件引用到這個資料夾內, 元件首字母建議大寫, **如下

bottomtab>

div>
template>
// 1. 使用 import 匯入想要引用的的子元件, 這裡採用的是絕對路徑
import bottomtab from '@/components/common/bottomtab'
export default ,
script>想實現路由之間相互跳轉的話, 必須得先配置 router/index.js 檔案 
maincontent
為主路由;homediscoverorderprofile為子路由, 對應跳轉的四個頁面, **如下
import vue from 'vue'
import router from 'vue-router'
// 主路由
const maincontent = resolve=>
require.ensure(, () => resolve(require('@/views/main.vue')), 'maincontent');
// 首頁
const
home = resolve =>
require.ensure(, () => resolve(require('@/views/home/home.vue')), 'home'); // 首頁
// 發現
const
discover = resolve =>
require.ensure(, () => resolve(require('@/views/discover/discover.vue')), 'discover'); // 發現
// 訂單
const
order = resolve =>
require.ensure(, () => resolve(require('@/views/order/order.vue')), 'order'); // 訂單
// 我的
const
profile = resolve =>
require.ensure(, () => resolve(require('@/views/profile/profile.vue')), 'profile'); // 我的
vue.use
(router)
export
default
newrouter
(, , , , ,]},
]})

進入前面建立好的檔案main.vue內, **如下

bottomtab>

class="main-content">
router-view>
div>
div>
template>然後進入頁面看一下效果, 是否配置成功 
Vue Router 路由元件傳參
在元件中使用 route 會使之與其對應路由形成高度耦合，從而使元件只能在某些特定的 url 上使用，限制了其靈活性。使用 props 將元件和路由解耦 取代與 route 的耦合 const user const router new vuerouter 通過 props 解耦 const use...
vue 前端路由和vue router
1 概念 什麼是前端路由 通俗地講，就是 比如 yancyxiao.cn 再專業一點 就是每次 get.或者 post 等請求在服務端有乙個專門的正則配置列表，然後匹配到具體的一條路徑後，分發到不同的 controller，進行各種操作，最終將 html或資料返回給前端，這就完成了一次 io。如果不...
vue router路由巢狀
巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置，需要使用children陣列來定義子...