資訊專欄INFORMATION COLUMN
摘要：將路由寫法改為定義路由的方法跳轉(zhuǎn)路由字符串對(duì)象命名的路由帶查詢參數(shù)，變成下一章講解狀態(tài)管理以上代碼代碼親測(cè)可用，托管在上面，歡迎參考文獻(xiàn)效果圖
上一篇講了Vue起步：環(huán)境的搭建用webpack打包vue 下面講一下vue路由vue-router 8.使用路由vue-router2
首先安裝 vue-router:
npm install vue-router --save
修改main.js:
1.引入APP,about兩個(gè)組件導(dǎo)入router組件
引入子組件Child
import App from "./src/index.vue";
import About from "./src/about.vue";
import Child from "./src/children.vue"
import VueRouter from "vue-router";
Vue.use(VueRouter)
2.定義路由：
嵌套路由用children:[]存放,子組件在父組件的
中渲染,路由通過 "/:id" 定義參數(shù)通過鏈接 "/about/123"傳遞參數(shù)
在組件中通過{{$route.params.id}}獲取傳參
const routes = [
{ path: "/index", component: App },
{ path: "/about/:id", component: About ,children:[
{ path: "child", component: child}
]}
]
創(chuàng)建 router 實(shí)例，然后傳 routes 配置
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
創(chuàng)建和掛載根實(shí)例。
const app = new Vue({
router
}).$mount("#main")
5.修改index.html文件
index about child router
6.修改父組件about.vue
寫才發(fā)現(xiàn)，只能有一個(gè)頂級(jí)的HTML標(biāo)簽
傳遞的參數(shù)為：{{ $route.params.id }}
8.1路由重定向redirect
routes: [
...
{ path: "/a", redirect: "/index" }
]
訪問/a時(shí)將跳轉(zhuǎn)值/index對(duì)應(yīng)的組件
8.2 路由懶加載用vue.js寫單頁面應(yīng)用時(shí)，會(huì)出現(xiàn)打包后的JavaScript包非常大，影響頁面加載，我們可以利用路由的懶加載去優(yōu)化這個(gè)問題。將路由寫法改為：
//定義路由
const routes = [
{ path: "/index", component: resolve => require(["./src/index.vue"], resolve) },
{
path: "/about/:id", component: resolve => require(["./src/about.vue"], resolve) ,
children:[
{ path: "child", component: resolve => require(["./src/children.vue"], resolve)}
]},
{ path: "/a", redirect: "/index" }
]
8.3 js的方法跳轉(zhuǎn)路由
// 字符串
router.push("home")
// 對(duì)象
router.push({ path: "home" })
// 命名的路由
router.push({ name: "user", params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})
下一章講解狀態(tài)管理Vuex
以上代碼代碼親測(cè)可用，托管在github上面，歡迎star參考文獻(xiàn):vue-router
效果圖:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/88596.html
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：請(qǐng)輸入代碼注意只適用于版本，下面我們是基于講的如何使用實(shí)現(xiàn)路由功能。一使用路由在中，需要明確安裝路由功能定義組件，這里使用從其他文件進(jìn)來定義路由創(chuàng)建實(shí)例，然后傳配置創(chuàng)建和掛載根實(shí)例。路由記錄就是配置數(shù)組中的對(duì)象副本還有在數(shù)組。 請(qǐng)輸入代碼注意：vue-router 2只適用于Vue2.x版本，下面我們是基于vue2.0講的如何使用vue-router 2實(shí)現(xiàn)路由功能。推薦使用npm安裝...
摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過的坑 由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號(hào)的區(qū)別 ...
閱讀 1208·2021-09-30 09:47
閱讀 3758·2021-09-06 15:02
閱讀 1765·2021-09-01 10:46
閱讀 2353·2019-08-30 15:52
閱讀 587·2019-08-29 15:28
閱讀 1867·2019-08-29 15:08
閱讀 1142·2019-08-29 13:28
閱讀 2565·2019-08-29 12:19
