vuerouter传参方式_VUE Router学习原理(一)
點(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: `
? ?}
}·html首頁(yè)AAABBB
·queryString方式:to屬性可以傳遞queryString
·html
首頁(yè)AAABBB·js{
? ?path: '/usr/:name',
? ?component: {
? ? ? ?template: `
? ?}
}
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: `
? ?},
? ?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)題。
- 上一篇: centos安装php服务器,在Cent
- 下一篇: html5倒计时秒杀怎么做,vue 设