vuerouter传参方式_VUE Router学习原理(一)
點擊藍字 關注我們
????????????????????????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: `
? ?}
}·html首頁AAABBB
·queryString方式:to屬性可以傳遞queryString
·html
首頁AAABBB·js{
? ?path: '/usr/:name',
? ?component: {
? ? ? ?template: `
? ?}
}
4.3子路由
·使用append實現子路由:append標記后, to內容會被追加到當前route下面
·html
首頁AAA·js
{
? ?path: '/usr/:name',
? ?component: {
? ? ? ?template: `
? ?},
? ?children: [
? ? ? ?{
? ? ? ? ? ?path: 'more',
? ? ? ? ? ?component: {
? ? ? ? ? ? ? ?template: `詳細信息: 哈哈哈哈哈`
? ? ? ? ? ?},
? ? ? ?}
? ?]
}
畫外音
排版有限,明日更新4.4-4.6
? ? ? ? ? ? ? ? ? ? 4.4 通過程序傳參
????????????????????4.5 同時(同級)展示多個視圖
????????????????????4.6 導航鉤子
我知道你“在看”喲~
總結
以上是生活随笔為你收集整理的vuerouter传参方式_VUE Router学习原理(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: centos安装php服务器,在Cent
- 下一篇: kind富文本编辑器_在VueJs中集成