全面解析vue router 基本使用(動態(tài)路由,嵌套路由)
路由,其實就是指向的意思,當(dāng)我點擊頁面上的home按鈕時,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的about 按鈕,頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說是一種映射. 所以在頁面上有兩個部分,一個是點擊部分,一個是點擊之后,顯示內(nèi)容的部分。
:<router-link to="/home">Home</router-link>
:{path:'/home', component: home}
const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]
const router = new VueRouter({ routes // routes: routes 的簡寫 })
const app = new Vue({ router }).$mount('#app')
<template> <div> <h1>home</h1> <p>{{msg}}</p> </div> </template> <script> export default { data () { return { msg: "我是home 組件" } } } </script> <template> <div> <h1>about</h1> <p>{{aboutMsg}}</p> </div> </template> <script> export default { data () { return { aboutMsg: '我是about組件' } } } </script>
<template> <div id="app"> <img src="./assets/logo.png"> <header> <!-- router-link 定義點擊后導(dǎo)航到哪個路徑下 --> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> </header> <!-- 對應(yīng)的組件內(nèi)容渲染到router-view中 --> <router-view></router-view> </div> </template> <script> export default { } </script>
import Vue from "vue"; import VueRouter from "vue-router"; // 引入組件 import home from "./home.vue"; import about from "./about.vue"; // 要告訴 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path:"/home", component: home }, { path: "/about", component: about } ] var router = new VueRouter({ routes }) export default router;
import Vue from 'vue' import App from './App.vue' // 引入路由 import router from "./router.js" // import router 的router 一定要小寫, 不要寫成Router, 否則報 can't match的報錯 new Vue({ el: '#app', router, // 注入到根實例中 render: h => h(App) })
const routes = [ { path:"/home", component: home }, { path: "/about", component: about }, // 重定向 { path: '/', redirect: '/home' } ]
<template> <div id="app"> <img src="./assets/logo.png"> <header> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <!-- 增加兩個到user組件的導(dǎo)航,可以看到這里使用了不同的to屬性 --> <router-link to="/user/123">User123</router-link> <router-link to="/user/456">User456</router-link> </header> <router-view></router-view> </div> </template>
const routes = [ { path:"/home", component: home }, { path: "/about", component: about }, /*新增user路徑,配置了動態(tài)的id*/ { path: "/user/:id", component: user }, { path: '/', redirect: '/home' } ]
<template> <div> <h1>User</h1> <div>我是user組件</div> </div> </template> <script> export default { } </script>
<template> <div> <h1>User</h1> <div>我是user組件, 動態(tài)部分是{{dynamicSegment}}</div> </div> </template> <script> export default { computed: { dynamicSegment () { return this.$route.params.id } } } </script>
<script> export default { data () { return { dynamicSegment: '' } }, watch: { $route (to,from){ // to表示的是你要去的那個組件,from 表示的是你從哪個組件過來的,它們是兩個對象,你可以把它打印出來,它們也有一個param 屬性 console.log(to); console.log(from); this.dynamicSegment = to.params.id } } } </script>
<template> <div> <h1>home</h1> <!-- router-link 的to屬性要注意,路由是先進入到home,然后才進入相應(yīng)的子路由如 phone,所以書寫時要把 home 帶上 --> <p> <router-link to="/home/phone">手機</router-link> <router-link to="/home/tablet">平板</router-link> <router-link to="/home/computer">電腦</router-link> </p> <router-view></router-view> </div> </template>
const routes = [ { path:"/home", // 下面這個屬性也不少,因為,我們是先進入home頁面,才能進入子路由 component: home, // 子路由 children: [ { path: "phone", component: phone }, { path: "tablet", component: tablet }, { path: "computer", component: computer } ] }, { path: "/about", component: about }, { path: "/user/:id", component: user }, { path: '/', redirect: '/home' } ]
children: [ { path: "phone", component: phone }, { path: "tablet", component: tablet }, { path: "computer", component: computer }, // 當(dāng)進入到home時,下面的組件顯示 { path: "", component: phone } ]
{ path: "/user/:id", name: "user", component: user }
<router-link to="/user/123">User123</router-link> // 和下面等價 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 當(dāng)使用對象作為路由的時候,to前面要加一個冒號,表示綁定
rourter.push()
方法。 當(dāng)們把router 注入到根實例中后,組件中通過 this.$router 可以獲取到router, 所以在組件中使用this.$router.push("home"),
就可以跳轉(zhuǎn)到home界面相關(guān)文章
使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue elementui簡易側(cè)拉欄的使用小結(jié)
這篇文章主要介紹了vue elementui簡易側(cè)拉欄的使用,增加了側(cè)拉欄,目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06vue中v-if?和v-permission?共同使用的坑及解決方案
這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關(guān)資料,需要的朋友可以參考下2023-07-07npm如何更新VUE package.json文件中依賴的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴的包版本問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件,子組件使用 $emit 觸發(fā)父組件的自定義事件,今天通過示例給大家詳細介紹下Vue?關(guān)于$emit與props的使用,感興趣的朋友一起看看吧2022-03-03