有时候，我们在用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. [转]关于ImportError: xxxx.so: undefined symbol: PyFPE_jbuf的解决方案

    转自: http://blog.csdn.net/zixiximm/article/details/50505921 最近在学着用caffe,总是遇到各种各样奇怪的问题.有时候搜遍整个google也找 ...

  2. Feign 请求拦截器和日志

    Feign 支持请求拦截器,在发送请求前,可以对发送的模板进行操作,例如设置请求头等属性,自定请求拦截器需要实现 feign.RequestInterceptor 接口,该接口的方法 apply 有参 ...

  3. 初次使用CentOs7遇到的问题

    初次使用CentOs7遇到的问题 1.XXX[用户名]不在sudoers文件中.此事将被报告 解决方案:CentOs自带命令visudo,其作用为调用vim来修改“/etc/sudoers”文件,从而 ...

  4. 编译安装mysql5.7

    ### 注意版本和此次更新时间 2018-3-11 版本:mysql-5.7.x 环境:linux7.x C/C++编译器安装 yum install gcc g++ -y CMake 是一个跨平台的 ...

  5. 64位系统VBS调用32位COM组件

    64位系统VBS调用32位COM组件 标签: 32位, 64位, COM, COM组件, VB, VBS, VBScript 标题: 64位系统VBS调用32位COM组件作者: Demon链接: ht ...

  6. Solr 自定义排序[1]

    需求:商品排序,无库存的商品排在后面(排序). 搜索:  默认搜索:                                            df:        可以看出左图第1个.第 ...

  7. 浏览器唤起APP的功能

    http://blog.html5funny.com/2015/06/19/open-app-from-mobile-web-browser-or-webview/ http://panli.mu.g ...

  8. MySQL总论

    1. MySQL基本概念 1.1.  数据库的概念 数据库,简而言之就是存储数据的仓库,可以按照一定的数据结构存储管理大量的数据及数据与数据之间的关系,它本质上是一种信息管理系统.数据库根据存储采用的 ...

  9. 服务网关zuul之六：Zuul高可用

    我们实际使用Zuul的方式如上图,不同的客户端使用不同的负载将请求分发到后端的Zuul,Zuul在通过Eureka调用后端服务,最后对外输出.因此为了保证Zuul的高可用性,前端可以同时启动多个Zuu ...

  10. 面向对象php 接口 抽象类

    1.定义类和实例化对象: 使用关键字class定义类,使用new实例化对象: 2.类成员的添加和访问: 类成员:有属性,方法,常量(常量名不带$符): 访问属性的时候,变量名不带$符 添加属性需要使用 ...