vue-router：3、vue-router的基本使用

最新推荐文章于 2023-06-20 08:44:04 发布

爱发呆的程序员

最新推荐文章于 2023-06-20 08:44:04 发布

阅读量273

点赞数 1

分类专栏：笔记 vue-router 文章标签： vue

本文链接：https://blog.csdn.net/tinglis/article/details/114303439

版权

笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

vue-router

22 篇文章 0 订阅

订阅专栏

vue-router：3、`vue-router`的基本使用

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

基本使用的步骤：

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

下面看一下具体的实施过程

引入相关的库文件

<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->   
<script src="./lib/vue_2.5.22.js"></script> 

<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 --> 
<script src="./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>' 
  }

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

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

把路由挂载到 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>

爱发呆的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router：3、vue-router的基本使用

vue-router：3、vue-router的基本使用Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。基本使用的步骤：引入相关的库文件添加路由链接添加路由填充位定义路由组件配置路由规则并创建路由实例把路由挂载到Vue 根实例中下面看一下具体的实施过程引入相关的库文件<!-- 导入 vue 文件，为全局 window 对象挂
复制链接

扫一扫