有时候，我们在用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. 安装tensorflow，那叫一个坑啊

    最近,项目团队需要研究并应用AI的技术,在具体的产品实施环节中使用.之前的几个项目,是委托武汉大学给做的,基于keras框架,实现了一些图像识别的项目. 这不,上方希望自己能够掌握一些常用且成熟的AI ...

  2. ecstore-ftp设置，不能上传文件

    某些主机居然不能上传,ftp改成127.0.0.1即可 ftp地址改成127.0.0.1即可...

  3. php 安装mongo扩展（其他扩展同理）

    很多次安装mogo扩展不成功,总结出来,无非就是一个原因.对应的版本选择不正确 简单来说这篇文章就是来教你如何选择php对应的mongo.ll版本 查看phpinfo https://pecl.php ...

  4. RTB业务知识之1-原生广告

    一.背景 Native Advertising (Native Ads), 又称为原生广告, 是2013全球媒体界爆红的关键词,从2012年年底,就有人开始提了这个名词,接着到处都可以看到这个名词,再 ...

  5. 【剑指offer】字符串替换

    请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. *StringBuffer 扩容 str ...

  6. SQL优化系列——查询优化器

    大多数查询优化器将查询计划用“计划节点”树表示.计划节点封装执行查询所需的单个操作.节点被布置为树,中间结果从树的底部流向顶部.每个节点具有零个或多个子节点 - 这些子节点是输出作为父节点输入的节点. ...

  7. 廖雪峰Java2面向对象编程-2数据封装-1方法

    1.数据封装 一个class可以包含多个field.直接把field用public暴露给外部可能破坏了封装,例如传入不合理的数值(年龄填入1000).如下 public class Person { ...

  8. rnn实现三位数加法的训练

    #!/usr/bin/env python # coding=utf-8 from keras.models import Sequential from keras.layers import Ac ...

  9. Nginx下配置ThinkPhp多入口访问

    比如在一个项目中有前台与后台两个模块,需要使用不同的入口文件.同时希望前台使用默认的index.php的入口. 关键的配置如下: if (!-e $request_filename) {        ...

  10. 00007 - Linux时间date命令详解

    1.命令:date 2.命令功能:date 可以用来显示或设定系统的日期与时间. 3.命令参数 -d<字符串>:显示字符串所指的日期与时间.字符串前后必须加上双引号: -s<字符串& ...