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

 

import Home from '@/components/Home';
Vue.use(Router)

export default new Router({

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

 

routes: [
  //默認路徑下顯示該路由
  {
    path: '/',
    name: 'home',
    component: Home,
    children:[
      {path:'/',
       component:Login
      }
    ]
  },{
    path: '/hello',
    name: 'helloWorld',
    component: HelloWorld
  }
]

 

 

在配置的路由后面，添加 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
    }
  ]
})

　　

 

運行后界面如圖：

 

 

 

 

 

 

好了，今天的路由配置與跳轉就講到這里，下次我們繼續動態路由的配置講解步驟。