vue Router基本使用&重定向

Router基本使用

1. 基本使用步驟
2. 引入相關的庫文件
3. 添加路由鏈接
4. 添加路由填充位
5. 定義路由的組件
6. 配置路由規則並創建路由實例
7. 把路由掛載到Vue根實例中

引入相關庫文件

<!-- 導入 vue 文件，為全局 window 對象掛載 Vue 構造函數 -->
<script scr='./lib/vue_2.5.22.js"></script>

<!-- 導入 vue-router 文件，為全局 window 對象掛載 VueRouter 構造函數 -->
<script scr='./lib/vue-router_3.0.2.js"></script>

添加路由鏈接

<!-- router-link 是vue提供的標簽，默認會被渲染成a標簽 -->
<!-- to 屬性默認會被渲染為 href 屬性 -->
<!-- to 屬性的值默認會被渲染為 # 開頭的hash地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

添加路由填充位

<!-- 路由填充位（也叫路由占位符） -->
<!-- 將來通過路由規則匹配到組件，將會被渲染到 router-view 所在的位置-->
<router-view></router-view>

定義路由組件

var User = {
　　template : '<div>User</div>'
}
var Register = {
　　template : '<div>Register</div>'
}

配置路由規則並創建路由實例

// 創建路由實例對象
const router = new VueRouter({
  // 所有的路由規則
  routes: [
　　//每個路由規則都是一個配置對象，其中至少包含path 和 component 兩個
　　//path 表示當前路由規則匹配的hash地址
　　//component 表示當前路由規則對應要展示的組件
    { path: '/user', component: User },
    { path: '/register', component: Register }
  ]
})

把路由掛載到Vue根實例中

// 創建 vm 實例對象
const vm = new Vue({
  // 指定控制的區域
  el: '#app',
  data: {},
  // 掛載路由實例對象
  // router: router
  router
})

路由重定向

路由重定向指的是：用戶載訪問A的時候，強制用戶跳轉帶地址C從而展示特定的組件頁面

通過路由規則的 redirect 屬性，指定一個新的路由地址，可以很方便地設置路由重定向

const router = new VueRouter({
  routes: [
  　　//其中，paht 表示需要被重定向的原地址，redirect 表示將要被重定向到的新地址
　　 {path: '/', redirect: User },
    { path: '/user', component: User },
    { path: '/register', component: Register }
  ]
})