有时候，我们在用vue的时候会有这样的需求，比如一个管理系统，点了左边的菜单栏，右边跳转到一个新的页面中，而且刷新的时候还会停留在原来打开的页面。

又或者，一个页面中几个不同的画面来回点击切换，这两种情况都可以用vue router路由来解决。

1，js的引用

<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>

<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>

 2，代码

  <body>

    <div id="app">

        <div>

            <!--

                router-link to属性就是指向某个具体的链接，链接的内容会被渲染到router-view标签中

                router-link会被渲染成a标签，例如第一个会变成<a href="#/first">第一个页面</a>,前面加了个#

            -->

            <router-link  to="/user">用户管理</router-link>

            <router-link  to="/company">商家管理</router-link>

        </div>

        <router-view></router-view>

    </div>

  </body>

</html>

<script>

    /*

    * 申明三个模板

    */

    var user = { template: '<p>用户信息</p>' };

    var company = { template: '<p>操作用户</p>' };

    /*

    * 定义路由，component属性是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。

    */

    var routes = [

        { path: '/user', component: user },

        { path: '/company', component: company },

    ];

    /*

    * 创建VueRouter实例

    */

    var router = new VueRouter({

        routes:routes

    });

    /*

    * 给vue对象绑定路由

    * .$mount("#app")手动挂载，用来延迟挂载，跟

    *  const app = new Vue({

    *   el:"#app"

    *   router

    * });

    * 效果是一样的

    */

    const app = new Vue({

        router

    }).$mount("#app");

</script>

效果:

　　

路由传参

/*路径后添加参数*/

var routes = [

        { path: '/user/:id', component: user },

        { path: '/company', component: company },

    ];

$route可以获取路由信息

var user = { template: '<p>用户信息{{$route.params.id}}</p>' };

　　　　　　

Vue.js路由的更多相关文章

  1. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  2. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  3. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  4. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  5. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  6. Bug记载2之Vue.JS路由定义的位置

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  7. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

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

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

  9. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. MySQL状态变量详解

    MySQL状态变量详解 mysql的状态变量(status variables)记录的mysql服务器的运行状态信息.查看语法如下: SHOW [GLOBAL | SESSION] STATUS; S ...

  2. Linux lsattr命令详解

    Linux lsattr命令 Linux lsattr命令用于显示文件属性. 用chattr执行改变文件或目录的属性,可执行lsattr指令查询其属性 用法: lsattr [-adlRvV][文件或 ...

  3. Spring Cloud Eureka 服务发现与消费

    服务发现与消费,其服务发现的任务是由Eureka的客户端完成,而服务的消费任务由Ribbon.JerseyClient等完成,Ribbon是一个基于HTTP和TCP的客户端负载均衡器:使用Jersey ...

  4. SDI初识

    SDI初识 SDI接口,即“数字分量串行接口(Serial Digital Interface)”.按照速率可以分为: 标准清晰度SD-SDI,速率为270Mb/s; 高清标准HD-SDI,速率为1. ...

  5. CentOS 7 firewalld vsftpd开放端口

    开放FTP端口的方法: 暂时开放 ftp 服务 firewall-cmd --add-service=ftp 1 永久开放 ftp 服务 firewall-cmd --add-service=ftp ...

  6. Delphi实现树型结构

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. create-react-app快速搭建react-app

    npm i create-react-app -g 全局安装 create-react-app mydemo    创建一个项目,安装依赖 cd mydemo 进入mydemo目录 yearn sta ...

  8. Dubbo的原理以及详细原理、配置

    Dubbo的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. Dubbo的应用 用于大规模 ...

  9. [蓝桥杯]ALGO-51.算法训练_Torry的困惑(基本型)

    题目描述: 问题描述 Torry从小喜爱数学.一天,老师告诉他,像2...……这样的数叫做质数.Torry突然想到一个问题,前10...……个质数的乘积是多少呢?他把这个问题告诉老师.老师愣住了,一时 ...

  10. 解决 https urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] 错误

    import ssl ssl._create_default_https_context = ssl._create_unverified_context