點擊藍字 關注我們

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

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

????????二. 導入

????????三. 說明

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

? 4.1 靜態頁面跳轉

????????????????????4.2 動態頁面跳轉

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

????????????????????4.4 通過程序傳參

????????????????????4.5 同時(同級)展示多個視圖

????????????????????4.6 導航鉤子

壹·安裝

·shell

cnpm i vue-router -S

貳·導入

·js

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

叁·說明

①http地址中'#'號之后的部分表示router地址

②router-link:會變為標簽, 最好用div包裹起來

·html

more

③router-view:用于渲染

肆·使用

4.1靜態頁面跳轉

·定義路由

·js

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

首頁

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

關于我們

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

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

? ? ? ?首頁關于我們

·點擊router-link連接, 就會調整到對應的router-view頁面

4.2動態頁面跳轉

·param方式

·js

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

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

首頁AAABBB

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

·html

首頁AAABBB·js

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

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

4.3子路由

·使用append實現子路由:append標記后, to內容會被追加到當前route下面

·html

首頁AAA

·js

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

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

畫外音

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

? ? ? ? ? ? ? ? ? ? 4.4 通過程序傳參

????????????????????4.5 同時(同級)展示多個視圖

????????????????????4.6 導航鉤子

我知道你“在看”喲～

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。