vue路由的配置
一、準備工作
1 安裝 vue-cli npm install vue-cli -g
2 檢查是否安裝成功 vue -V( 大寫 V)
3 初始化一個新的專案 vue init webpack vue-demo
進入專案目錄 npm install npm run dev
二、配置路由
1 我們可以看到生成的 router 資料夾下面有個 index.js
首先我們先在 components 下新建幾個元件，如 HelloWorld.vue \ Home.vue 在 index.js 中引入 ，路由配置如下 index.js
importHome from '@/components/Home';
Vue.use(Router)
export default newRouter({
mode:'history',
routes: [
//預設路徑下顯示該路由
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/home',
name: 'Home',
component: Home
}
]
})
注意：在建立的 router 物件中，如果不配置 mode ，就會使用預設的 hash 模式，該模式下會將路徑格式化為 #! 開頭。
新增 mode: 'history' 之後將使用 HTML5 history 模式，該模式下沒有 # 字首，而且可以使用 pushState 和 replaceState 來管理記錄。
2App.vue 作為一個存放元件的入口容器，其中 <router-view> 是用來渲染通過路由對映過來的元件，當路徑更改時， <router-view> 中的內容也會發生更改
上面已經配置了兩個路由，當開啟 http://localhost:8080 或者 http://localhost:8080/home 的時候，就會在 <router-view> 中渲染 home.vue 元件。 Home 相當於是這個頁面的主介面，其他的頁面都是 巢狀 在這個頁面裡面的，所以有動態變化的地方都要有 <router-view> ，如果被嵌入的頁面部分下還有下一級頁面，則需要在一級路由中巢狀二級路由，修改 router/index.js
1 routes: [
2//預設路徑下顯示該路由
3{
4path: '/',
5name: 'home',
6component: Home,
7children:[
8{path:'/',
9component:Login
10}
11]
12},{
13path: '/hello',
14name: 'helloWorld',
15component: HelloWorld
16}
17 ]
在配置的路由後面，新增 children，並在 children 中新增二級路由，就能實現路由巢狀
配置 path 的時候，以 " / " 開頭的巢狀路徑會被當作根路徑，所以子路由的 path 不需要新增 " / "
三、 使用 <router-link> 對映路由
我們在 index 頁面裡面加上對映路由，使其進行調轉。
首先 我們在 login 登入加一個路由跳轉，也稱為 程式設計式導航
this.$router.push(location) 來修改 url ，完成跳轉
push 後面可以是物件，也可以是字串：
// 字串
this.$router.push('/home/first')
// 物件
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})//傳參的形式
然後，進入index 頁面後，設定兩個 router-link, 在編譯之後， <router-link> 會被渲染為 <a> 標籤， to 會被渲染為 href ，當 <router-link> 被點選的時候， url 會發生相應的改變 , 如果對於所有 ID 各不相同的使用者，都要使用 home 元件來渲染，可以在 index .js 中新增動態引數：
這樣 "/home/user01" 、 "/home/user02" 、 "/home/user03" 等路由，都會對映到 Home 元件
然後還可以使用 $route.params.id 來獲取到對應的 id
跳轉時的傳參：
this.$router.push(`/index/${ this .username}`);
路由的引數配置
{
path:'/index/:id',
component:index
},
跳轉後的引數接收：
created(){
this.usname = this.$route.params.id;
}
最後，在 index.vue 中寫好路由跳轉 router-link
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld';
import Home from '@/components/Home';
import Login from '@/components/Login';
import index from '@/components/index';
import Register from '@/components/Register';
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
//預設路徑下顯示該路由
{
path: '/',
name: 'home',
component: Home,
children:[
{path:'/',
component:Login
},
{
path:'/index/:id',
component:index
},
{
path:'register',
component:Register
}
]
},{
path: '/hello',
name: 'helloWorld',
component: HelloWorld
}
]
})
執行後介面如圖：
好了，今天的路由配置與跳轉就講到這裡，下次我們繼續動態路由的配置講解步驟。