路由，其實就是指向的意思，當(dāng)我點(diǎn)擊頁面上的home按鈕時，頁面中就要顯示home的內(nèi)容，如果點(diǎn)擊頁面上的about 按鈕，頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容， about按鈕 => about 內(nèi)容，也可以說是一種映射. 所以在頁面上有兩個部分，一個是點(diǎn)擊部分，一個是點(diǎn)擊之后，顯示內(nèi)容的部分。
點(diǎn)擊之后，怎么做到正確的對應(yīng)，比如，我點(diǎn)擊home 按鈕，頁面中怎么就正好能顯示home的內(nèi)容。這就要在js 文件中配置路由。 路由中有三個基本的概念 route, routes, router。 1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數(shù)， Home按鈕 => home內(nèi)容， 這是一條route, about按鈕 => about 內(nèi)容， 這是另一條路由。 2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數(shù)組。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}] 3， router 是一個機(jī)制，相當(dāng)于一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪里是靜止的，當(dāng)真正來了請求，怎么辦？ 就是當(dāng)用戶點(diǎn)擊home 按鈕的時候，怎么辦？這時router 就起作用了，它到routes 中去查找，去找到對應(yīng)的 home 內(nèi)容，所以頁面中就顯示了 home 內(nèi)容。 4，客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當(dāng)頁面中顯示home 內(nèi)容的時候，about 中的內(nèi)容全部隱藏，反之也是一樣。客戶端路由有兩種實現(xiàn)方式：基于hash 和基于html5 history api. vue-router中的路由也是基于上面的內(nèi)容來實現(xiàn)的 在vue中實現(xiàn)路由還是相對簡單的。因為我們頁面中所有內(nèi)容都是組件化的，我們只要把路徑和組件對應(yīng)起來就可以了，然后在頁面中把組件渲染出來。 1， 頁面實現(xiàn)（html模版中） 在vue-router中, 我們看到它定義了兩個標(biāo)簽<router-link> 和<router-view>來對應(yīng)點(diǎn)擊和顯示部分。<router-link> 就是定義頁面中點(diǎn)擊的部分，<router-view> 定義顯示部分，就是點(diǎn)擊后，區(qū)配的內(nèi)容顯示在什么地方。所以 <router-link> 還有一個非常重要的屬性 to，定義點(diǎn)擊之后，要到哪里去， 如
：<router-link to="/home">Home</router-link>
2， js 中配置路由
首先要定義route, 一條路由的實現(xiàn)。它是一個對象，由兩個部分組成： path和component. path 指路徑，component 指的是組件。如：{path:'/home', component: home}
我們這里有兩條路由，組成一個routes:
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 定義點(diǎn)擊后導(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屬性要注意，路由是先進(jìn)入到home,然后才進(jìn)入相應(yīng)的子路由如 phone,所以書寫時要把 home 帶上 --> <p> <router-link to="/home/phone">手機(jī)</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",
// 下面這個屬性也不少，因為，我們是先進(jìn)入home頁面，才能進(jìn)入子路由
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)進(jìn)入到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界面
總結(jié)
以上所述是小編給大家介紹的vue router 基本使用，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
