有时候，我们在用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. javaweb下载中的一个问题

    如果你发现,response头以及contentType都已经设置没错,但出现浏览器将下载的文件内容显示到新窗口 那么解决方案就是在请求的时候不要产生新的窗口

  2. JS 动态加载脚本的4种方法

    有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...

  3. 坑人的 Javascript 模块化编程 require.js

    坑人的 Javascript 模块化编程 require.js

  4. WPF Demo16 资源

    <Window x:Class="RescourceDemo1.MainWindow" xmlns="http://schemas.microsoft.com/wi ...

  5. <亲测>centos安装 .net core 2.1

    https://www.microsoft.com/net/learn/get-started-with-dotnet-tutorial#install .NET Tutorial - Hello W ...

  6. Array and Colon in Matlab

    1. Colon x=1:4 % x=[1 2 3 4] x=1:2:5 % x=[1 3 5]  (递增值为2) 2. Array 用一个矩阵作为例子: A=[1 2 3; 4 5 6; 7 8 9 ...

  7. 在windows 7中vagrant up 无反应，没任何信息输出

    本文转载自:https://blog.csdn.net/cow66/article/details/77993908 我的系统是windows 7 安装了vagrant,当运行vagrant up时, ...

  8. Python3 读、写Excel文件

    首先,简单介绍一下EXECL中工作簿和工作表的区别: 工作簿的英文是BOOK(WORKBOOK),工作表的英文是SHEET(WORKSHEET). 一个工作簿就是一个独立的文件 一个工作簿里面可以有1 ...

  9. Hadoop概念学习系列之关于hadoop-2.2.0和hadoop2.6.0的winutils.exe、hadoop.dll版本混用（易出错）（四十三）

    问题详情是 2016-12-10 23:24:13,317 INFO [org.apache.hadoop.metrics.jvm.JvmMetrics] - Initializing JVM Met ...

  10. 三星GT-N8010刷机教程

    本刷机教程只针对三星GT-N8010机器(以下简称GT-N8010),以下操作本人已在GT-N8010机器上亲测,且都成功,其它机器没有测试不能保证成功. 刷机有风险,请谨慎使用!请先备份资料和信息. ...