vue学习--前端路由(二、Vue Router基本使用)

2 Vue Router

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发.

Vue Router功能：

  • 支持HTML5 历史模式或 hash 模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路

2.1 基本使用步骤

  1. 引入相关的库文件
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到 Vue 根实例中

2.2 引入相关的库文件


<script src="./lib/vue_2.5.22.js"></script>


<script src="./lib/vue-router_3.0.2.js"></script>

2.3 添加路由链接




<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

2.4 添加路由填充位


<router-view></router-view>

2.5 定义路由组件

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

2.6 配置路由规则并创建路由实例

// 创建路由实例对象     
var router = new VueRouter({     
  // routes 是路由规则数组     
  routes: [       
   // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：       
   // path 表示当前路由规则匹配的 hash 地址       
   // component 表示当前路由规则对应要展示的组件       
   {path:'/user',component: User}, 
   {path:'/register',component: Register} 
  ] 
})

2.7 把路由挂载到 Vue 根实例中

  new Vue({ 
     el: '#app',      // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上      router 
  });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

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

2.8 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面； 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

 var router = new VueRouter({ 
    routes: [       
    // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址          {path:'/', redirect: '/user'}, 
    {path:'/user',component: User}, 
    {path:'/register',component: Register} 
    ] 
  })
posted @ 2020-04-19 22:15  一纸年华  阅读(10)  评论(0)  编辑  收藏  举报  来源