點(diǎn)擊藍(lán)字 關(guān)注我們

????????????????????????Vue Router

????????一. 安裝

????????二. 導(dǎo)入

????????三. 說(shuō)明

????????四. 使用

? 4.1 靜態(tài)頁(yè)面跳轉(zhuǎn)

????????????????????4.2 動(dòng)態(tài)頁(yè)面跳轉(zhuǎn)

????????????????????4.3 子路由

????????????????????4.4 通過(guò)程序傳參

????????????????????4.5 同時(shí)(同級(jí))展示多個(gè)視圖

????????????????????4.6 導(dǎo)航鉤子

壹·安裝

·shell

cnpm i vue-router -S

貳·導(dǎo)入

·js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

叁·說(shuō)明

①http地址中'#'號(hào)之后的部分表示router地址

②router-link:會(huì)變?yōu)闃?biāo)簽, 最好用div包裹起來(lái)

·html

more

③router-view:用于渲染

肆·使用

4.1靜態(tài)頁(yè)面跳轉(zhuǎn)

·定義路由

·js

var routes = [
? ?{
? ? ? ?path: '/',
? ? ? ?component: {
? ? ? ? ? ?template: `

首頁(yè)

`
? ? ? ?}
? ?},
? ?{
? ? ? ?path: '/about',
? ? ? ?component: {
? ? ? ? ? ?template: `

關(guān)于我們

`
? ? ? ?}
? ?}
];·Vue

var router = new VueRouter({
? ?routes: routes
});
var vm = new Vue({
? ?el: '#app',
? ?router: router
});·html

? ? ? ?首頁(yè)關(guān)于我們

·點(diǎn)擊router-link連接, 就會(huì)調(diào)整到對(duì)應(yīng)的router-view頁(yè)面

4.2動(dòng)態(tài)頁(yè)面跳轉(zhuǎn)

·param方式

·js

{
? ?path: '/usr/:name',
? ?component: {
? ? template: `

I am {{ $route.params.name }}`
? ?}
}·html

首頁(yè)AAABBB

·queryString方式:to屬性可以傳遞queryString

·html

首頁(yè)AAABBB·js

{
? ?path: '/usr/:name',
? ?component: {
? ? ? ?template: `

I am {{ $route.params.name }}I am {{ $route.query.age }} year old.`
? ?}
}

4.3子路由

·使用append實(shí)現(xiàn)子路由:append標(biāo)記后, to內(nèi)容會(huì)被追加到當(dāng)前route下面

·html

首頁(yè)AAA

·js

{
? ?path: '/usr/:name',
? ?component: {
? ? ? ?template: `

I am {{ $route.params.name }}more`
? ?},
? ?children: [
? ? ? ?{
? ? ? ? ? ?path: 'more',
? ? ? ? ? ?component: {
? ? ? ? ? ? ? ?template: `詳細(xì)信息: 哈哈哈哈哈`
? ? ? ? ? ?},
? ? ? ?}
? ?]
}

畫外音

排版有限，明日更新4.4-4.6

? ? ? ? ? ? ? ? ? ? 4.4 通過(guò)程序傳參

????????????????????4.5 同時(shí)(同級(jí))展示多個(gè)視圖

????????????????????4.6 導(dǎo)航鉤子

我知道你“在看”喲～

總結(jié)

以上是生活随笔為你收集整理的vuerouter传参方式_VUE Router学习原理(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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