vue Router基本使用&重定向

<!-- 导入 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 }
  ]
})

// 创建 vm 实例对象
const vm = new Vue({
  // 指定控制的区域
  el: ‘#app‘,
  data: {},
  // 挂载路由实例对象
  // router: router
  router
})

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