Vue-router的使用步骤：

Vue Router的使用步骤还是比较清晰的，按照步骤一步一步就能完成路由操作

A.导入js文件

B.添加路由链接

C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

D.定义路由组件

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

F.将路由挂载到Vue实例中；

Vue-router的使用方法  代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引入顺序不能乱 -->
  9.     <script src="./vue_2.5.22.js"></script>
  10.     <script src="./vue-router_3.0.2(1).js"></script>
  11. </head>
  12.  
  13. <body>
  14.     <!-- 被VM实例所控制的区域 -->
  15.     <div id="app">
  16.         <!--
  17.                 router-link是Vue中提供的标签   默认会被渲染为a标签
  18.                 to属性默认会被渲染为href属性
  19.                 to属性的值默认会被渲染为#开头的hash地址
  20.             -->
  21.         <router-link to='/user'>User</router-link>
  22.         <router-link to='/register'>Register</router-link>
  23.  
  24.         <!--
  25.                  路由填充位(也叫作占位符)
  26.                 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
  27.             -->
  28.         <router-view></router-view>
  29.     </div>
  30.     <script>
  31.         // 创建路由组建
  32.         const User = {
  33.             template: '<h1>User 组件</h1>'
  34.         }
  35.  
  36.         const Register = {
  37.             template: '<h1>regiter 组件</h1>'
  38.         }
  39.  
  40.         // 创建路由实例对象
  41.         const router = new VueRouter({
  42.             // 所有的路由规则
  43.             routes: [
  44.                 // 两个路由规则  每个路由规则都是一个配置对象 其中至少包含path和component两个属性
  45.                 // path 表示当前路由规则匹配的hash地址  router-link to里面是谁就要写谁 要一一对应
  46.                 // component 表示当前路由规则对应要展示的组件 只接收组件对象、不接受字符串   后面接const常量后面定义的
  47.                 { path: '/user', component: User },
  48.                 { path: '/register', component: Register }
  49.             ]
  50.         })
  51.  
  52.         // 创建VM对象
  53.         const vm = new Vue({
  54.             // 指定控制的区域
  55.             el: '#app',
  56.             data: {
  57.  
  58.             },
  59.             // 挂载路由实例对象   为了能够让路由规则生效 必须把路由对象挂载到Vue实例对象上
  60.             // router:router
  61.             router
  62.         })
  63.     </script>
  64. </body>
  65.  
  66. </html>

Vue-router的用法与使用步骤的更多相关文章

  1. vue router相关用法

    router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之 ...

  2. Vue 国际化 vue-i18n 用法详解

    vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm) npm insta ...

  3. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  4. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  5. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  6. Vue躬行记（8）——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  7. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  8. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  9. Vue Router的导航解析过程

    在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...

  10. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

随机推荐

  1. python2.5项目：个税计算器程序

    #开发个税计算器:应纳税所得额=工资收入金额-各项社会保险费-起征点(5000元)应纳税额=应纳税所得额*税率—速算扣除数(税率参考图片)m=float(input("请输入你的税前工资:& ...

  2. 面经手册 · 第2篇《数据结构，HashCode为什么使用31作为乘数？》

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 在面经手册的前两篇介绍了<面试官都问我啥>和<认知自己的技术栈盲区 ...

  3. intellij idea springboot无法读取配置文件的解决方法

    问题描述 Spring Boot项目中运行之后,出现如下的错误: *************************** APPLICATION FAILED TO START *********** ...

  4. LinuX操作系统基础------>软件的安装方式，chmod权限，vi编辑器的使用

    RPM包管理 -rpm命令管理 RPM包管理 -yum在线管理 文件权限管理 vi编辑器的使用和常用的快捷键 1.RPM包管理: 一种用于互联网下载包的打包及安装工具,RPM包管理分为rpm命令管理和 ...

  5. URLDecoder异常解决方法

    URLDecoder对参数进行解码时候,代码如: URLDecoder.decode(param,"utf-8"); 有时候会出现类似如下的错误: URLDecoder异常Ille ...

  6. JS 图片跟随鼠标移动案例

    css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...

  7. ~/.ssh/目录找不到解决方法

    执行 cd ~/.ssh发现.ssh目录找不到 原因是因为没有用root用户ssh登录过,执行一下ssh操作就会自动生成了

  8. Hyperledger Fabric 部署

    Hyperledger Fabric 部署 Hyperledger Fabric需要使用Docker.Go环境. Docker环境安装 Docker环境安装 直接查看这一篇,安装好之后将当前用户非ro ...

  9. C#LeetCode刷题之#191-位1的个数（Number of 1 Bits）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4052 访问. 编写一个函数,输入是一个无符号整数,返回其二进制表 ...

  10. 攻防世界-web(进阶)-NaNNaNNaNNaN-Batman

    用winhex打开,发现是一个javascript代码.将文件重命名为html文件,用浏览器打开. 打开是一个输入框,输入任何东西都梅反应,尝试弹框输入也无果,继续查看代码. 查看代码,可以看到最开始 ...