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 }
  ]
})