路由和線(xiàn)路

路由router
表示當(dāng)前項(xiàng)目全局的路由實(shí)例對(duì)象
跳轉(zhuǎn)方法：push，replace，go，back

線(xiàn)路route
表示當(dāng)前路由頁(yè)面的信息對(duì)象
獲取動(dòng)態(tài)路由的參數(shù)：params

router跳轉(zhuǎn)的兩種方式

js跳轉(zhuǎn)叫[編程式跳轉(zhuǎn)]
<button @click="fn_target"></button>

fn_target(){this.$router.push('/home') }

標(biāo)簽跳轉(zhuǎn)叫【聲明式】
<router-link to="/name"></router-link>

router-link

特性 默認(rèn)是會(huì)被渲染成a標(biāo)簽 可以用tag屬性修改

屬性值

• to屬性跳轉(zhuǎn)到哪個(gè)頁(yè)面和path對(duì)應(yīng) （相當(dāng)于執(zhí)行一次this.$router.push(’/name’)）
• replace屬性，不需要寫(xiě)值，讓頁(yè)面不可回退，默認(rèn)是push屬性
• active-class用于修改單個(gè)class屬性
• tag渲染成什么元素

router-view

router-view決定渲染組件位置

routes簡(jiǎn)單語(yǔ)法

【注意】：不要忘記引入組件

const routes = [{path: '',// redirect重定向 ,相當(dāng)于直接默認(rèn)了home頁(yè)面redirect: '/home'},{path: ' * ',// 當(dāng)訪(fǎng)問(wèn)組件不存在時(shí)默認(rèn)返回home組件redirect: '/home'},{//路由嵌套(也需要一個(gè)視口) 地址顯示為 /home/name//【注意】子路由路徑中不加 / 程序自動(dòng)拼接path: '/home',component: Home,children: [//重定向{ path: '', redirect: 'new' },{path: 'new',component: New,},{path: 'product',component: Product,}]},{//動(dòng)態(tài)路由path: '/User/:userId',//渲染時(shí)：this.$router.push(`/info/value`)component: User},// 路由懶加載(不用引入組件) 分割js文件（一個(gè)懶加載對(duì)應(yīng)一個(gè)js文件），避免用戶(hù)加載頁(yè)面會(huì)出現(xiàn)短暫空白//方式一：結(jié)合Vue異步組件和webpack的代碼分析(知道即可，老項(xiàng)目有可能會(huì)出現(xiàn))//const Home = resolve => { require.ensure(['../components/Home.vue],()=>{//resolve(require('../components/Home.vue')) })}//方式二：AMD寫(xiě)法//const About = resolve =>require(['../components/About.vue'],resolve)//方式三：在ES5中，我們可以有更加簡(jiǎn)單的寫(xiě)法來(lái)組織Vue異步組件和Webpack的代碼分割{ path: '/home',component: ()=>import('../components/Home')} ]

router簡(jiǎn)單使用

const router = new VueRouter({routes,// 默認(rèn)hash值，現(xiàn)在改成history模式mode: 'history',// 修改全局的classlinkActiveClass: 'active' })

路由傳參的兩種方式

params

• 隱式(不推薦) 靜態(tài)路由使用params傳參，地址欄不會(huì)帶參數(shù)，所以刷新頁(yè)面數(shù)據(jù)會(huì)丟，一般不使用
• 顯示-動(dòng)態(tài)路由傳參。且必須使用路由命名的name屬性，不可以使用path。使用params對(duì)象傳遞參數(shù)

//映射id this.id=>this.$route.params.id props:['id']this.$router.push({name:'home',params:{id:1}})// routes配置中要有相應(yīng)的name const routes = [{// 動(dòng)態(tài)路由等于params顯示傳參name: 'home', //給當(dāng)前路由起一個(gè)名字，所以叫命名路由path: '/a/:id,component: () => import('./A.vue'),// props解耦，讓組件的props解耦params參數(shù)(默認(rèn)是false),可以簡(jiǎn)化語(yǔ)法props: true}, ]

query

使用query傳參，地址欄以get請(qǐng)求參數(shù)的形式表現(xiàn)。他沒(méi)有動(dòng)態(tài)路由優(yōu)雅

// routes配置中要有相應(yīng)的path this.$router.push({path:'/home',query:{id:1}})

總結(jié)

以上是生活随笔為你收集整理的router的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。