vue 路由id_vue路由详解
自己看vue文檔，難免有些地方不懂，自己整理一下，主要是vue-router具體實(shí)現(xiàn)的操作步驟。
安裝
直接下載/CDN
Unpkg.com提供了基于 NPM 的 CDN 鏈接。上面的鏈接會(huì)一直指向在 NPM 發(fā)布的最新版本。你也可以像
在 Vue 后面加載 vue-router，它會(huì)自動(dòng)安裝的：
NPM
npm install vue-router
如果在一個(gè)模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 標(biāo)簽，則無須如此(手動(dòng)安裝)。
#基礎(chǔ)
開始
HTML:
Hello App!
Go to Foo
Go to Bar
顯示的當(dāng)前路由的內(nèi)容
實(shí)現(xiàn)路由的跳轉(zhuǎn)
JavaScript：
// 0. 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)
// 1. 定義(路由)組件。
// 可以從其他文件 import 進(jìn)來
const Foo = { template: '
foo' }const Bar = { template: '
bar' }// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者，只是一個(gè)組件配置對(duì)象。
// 我們晚點(diǎn)再討論嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡(jiǎn)單著吧。
const router = new VueRouter({
routes // (縮寫)相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！
當(dāng) 對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值 .router-link-active
步驟：
1.在main.js中引入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
2.在main.js中使用這個(gè)router插件
Vue.use(VueRouter)
3.生成這個(gè)router實(shí)例
export default new Router(){
routes:[
{
path:'/',
name:'home',
component:Home
},{
path:'/list',
name:'list',
component:List
}
]
}
4.在index.js中把路由實(shí)例傳遞給Vue根組件
import router from './router'
new Vue({
el:'#app',
router,
template:'',
components:{ APP }
})
靜態(tài)路由
靜態(tài)配置的 ---> import ....
固定路徑路由的配置
{
path:'/',
name:'home',
component:Home
},{
path:'/list',
name:'list',
component:List
}
動(dòng)態(tài)路由匹配
只有動(dòng)態(tài)路由可以做到分頁的效果
{
path:'/list/:id',
name:'list',
component:List
}
list.vue
{{title}}return {
title:""
}
}
export default{
mounted(){
if(this.$route.params.id == 1){
//請(qǐng)求第一頁數(shù)據(jù)
this.title="第一頁"
}
if(this.$route.params.id == 2){
//請(qǐng)求第二頁數(shù)據(jù)
this.title="第二頁"
}
}
}
接收多個(gè)個(gè)參數(shù)
index.js
{
path:'/list/:id/name/:name',
name:'list',
component:List
}
list.vue
{{title}}{{name}}return {
title:"",
name:""
}
}
export default{
mounted(){
//結(jié)構(gòu)賦值寫法
const {name,id} = this.$route.params;
this.name = name;
//this.name = this.$route.params.name;
if(this.$route.params.id == 1){
//請(qǐng)求第一頁數(shù)據(jù)
this.title="第一頁"
}
if(this.$route.params.id == 2){
//請(qǐng)求第二頁數(shù)據(jù)
this.title="第二頁"
}
}
}
傳遞不同參數(shù) 顯示不同數(shù)據(jù)
項(xiàng)目應(yīng)用：詳情頁
watch 響應(yīng)路由參數(shù)的變化
監(jiān)聽路由的變化
watch:{
'$route'(to,from){
this.name = to.params.name;
}
}
在2.2中引入守衛(wèi)( beforeRouteUpdate)
守衛(wèi) --> 鉤子函數(shù)
beforeRouteUpdate (to, from, next) {
this.name = to.params.name;
next();//走到下一個(gè)鉤子
}
嵌套路由
頭部左側(cè)不變只有內(nèi)容區(qū)改變 這樣的需求可以用嵌套路由來做
{
path:'/list',
name:'list',
component:List,
childeren:[{
path:'a',
component:A
}]
}
再引入一個(gè)A組件 A.vue
在list.vue組件中通過，顯示A組件的內(nèi)容
在一個(gè)非app組件里面寫顯示的是當(dāng)前路由下子組件的內(nèi)容
編程式的導(dǎo)航
除了來創(chuàng)建a標(biāo)簽來定義導(dǎo)航鏈接，還可以借助router的實(shí)例方法
router.push(location,onCompelte?,onAbort?)
在Vue實(shí)例內(nèi)部，可以通過$route訪問路由實(shí)例，因此你可以調(diào)用this.$route.push
想要導(dǎo)航到不同的URL，則使用router.push方法。這個(gè)方法會(huì)向history棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的URL。
當(dāng)你點(diǎn)擊時(shí)，這個(gè)方法會(huì)在內(nèi)部調(diào)用，所以說，
點(diǎn)擊 ---> 聲明式
等同于
調(diào)用router.push(...) --->編程式
可以在Header組件中跳轉(zhuǎn)到list中
export defalut{
methods:{
handleClick(){
this.$router.push({
name:'list'
})
}
}
}
可以在Header組件中跳轉(zhuǎn)到list/123中
export defalut{
methods:{
handleClick(){
this.$router.push({
//一種方式
//path:'/list/123',
//2種方式
name:'list'
params:{
id:123
}
})
}
}
}
使用router.push 或者 router.replace 里面都不能讓path和params同時(shí)存在
//字符串
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'}})
router.replace
和router.push唯一的不同就是，不會(huì)向history添加新紀(jì)錄，而是替換掉當(dāng)前的history記錄不能返回
router.go
命名路由
定義名字跳轉(zhuǎn)
命名視圖
var app = new VueRouter({
routers:[{
path:'/',
componens:{
defaults:Foo,
a:Bar,
b:Baz
}
}]
})
重定向和別名
訪問/abc 重定向到/根路徑
{
path:'/abc',
redirect:'/'
}
訪問/bieming 實(shí)際上還是訪問的根路徑
{
path:'/',
name:'home',
component:Home,
alias:'/bieming'
}
路由組件傳參
解耦
動(dòng)態(tài)路由傳id
{
path:'/list/:id',
name:'list',
component:List,
props:true
}
在list.vue中
可以直接通過props['id']獲取數(shù)據(jù)
{{id}}props['id']
}
對(duì)象模式
props:{name:"dell"}
一般是寫死的字符串靜態(tài)數(shù)據(jù)
函數(shù)模式
index.js
{
path:'/list/:id',
name:'list',
component:List,
props : (route)=>({
query:route.query.q
id:route.params.id
})
}
list.vue
{{query}}{{id}}props['query','id']
}
我的博客即將搬運(yùn)同步至騰訊云+社區(qū)，邀請(qǐng)大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=1rr2npw3kickj
總結(jié)
以上是生活随笔為你收集整理的vue 路由id_vue路由详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PMC亮相IDF展示12G SAS分层存
- 下一篇： TypeScript+Vue