码迷,mamicode.com
首页 > 其他好文 > 详细

vue Router基本使用&重定向

时间:2021-01-02 11:43:47      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:a标签   hash   lin   window   view   文件   使用步骤   com   ash   

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

 

vue Router基本使用&重定向

标签:a标签   hash   lin   window   view   文件   使用步骤   com   ash   

原文地址:https://www.cnblogs.com/limu-zy/p/14209179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!