Vue路由大致分为6个步骤：

1.引用vue-router

<script src="js/vue-router.js"></script>

2.安装插件

Vue.use(VueRouter);

3.创建一个路由对象

 var router = new VueRouter({

    //这里面配置路由对象

});

4.配置路由对象

name:路由名称，在 router-link 只需要通过 :to={name:'变量名'}  指定跳转的地址；
path:跳转的路径，对应路径中#/后面的那串字符，如下图所示：

component:指定要更换的组件

routes:[

    {name:'***',path:'***',component:***}

]

5.将配置好的路由关联到vue实例中

router:router,

6.指定路由改变局部的位置

 
 
具体实例：
<!DOCTYPE html>

<html lang="en">

<head>

    <title>router-link</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <div id="app">

    </div>

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

    <!-- 1.引用vue-router -->

    <script src="js/vue-router.js"></script>

    <script>

        var Login = {

            template:`<div>我是登录页面</div>`

        }

        var Register = {

            template:`<div>我是注册页面</div>`

        }

        // 2.安装插件

        Vue.use(VueRouter);

        // 3.创建一个路由对象

        var router = new VueRouter({

            // 4.配置路由对象

            routes:[

                //对象有了name就等于有了变量名,第6步中router-link 只需要通过 :to={anme:'变量名'} 就可以了

                {name:'login',path:'/login',component:Login},

                {name:'register',path:'/register',component:Register}

            ]

        });

        //6.指定路由改变局部的位置

        var App = {

            template:`

                <div>

                    <router-link to="/login">登录</router-link>

                    <router-link :to="{ name:'login' }">登录</router-link>

                    <router-view></router-view>

                </div>

            `

        }

        //5.将配置好的路由关联到vue实例中

        var vm = new Vue({

            el: '#app',

            router:router,

            components: {

                app:App

            },

            template:`<app></app>`

        });

    </script>

</body>

</html>

Vue路由学习笔记的更多相关文章

  1. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  2. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  3. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  4. Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发

    所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架 ...

  5. vue视频学习笔记06

    video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...

  6. vue视频学习笔记

    video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...

  7. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  8. vue.js路由学习笔记

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

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

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

随机推荐

  1. 《Java Concurrency》读书笔记，使用JDK并发包构建程序

    1. java.util.concurrent概述 JDK5.0以后的版本都引入了高级并发特性,大多数的特性在java.util.concurrent包中,是专门用于多线并发编程的,充分利用了现代多处 ...

  2. Android基础知识之Manifest文件中的用户权限元素

    原文:http://android.eoe.cn/topic/android_sdk 分任务原文链接一:http://developer.android.com/guide/topics/manife ...

  3. SQL Server 2008 添加登录账户 配置权限

    首先打开数据库,并以windows身份验证模式扥牢固数据库, 然后在左侧的[对象资源管理器中]展开[安全性]节点,鼠标右键点击节点中的[登录名],在弹出的菜单中单击[新建登录名],弹出如图对话框: 然 ...

  4. 为你的网站加上SSL，可以使用HTTPS进行访问

    首先,我们使用的是nginx 将域名证书文件1_www.domain.com_bundle.crt .私钥文件2_www.domain.com.key保存到同一个目录,例如/usr/local/ngi ...

  5. 不应直接存储或返回可变成员 Mutable members should not be stored or returned directly

    Mutable objects are those whose state can be changed. For instance, an array is mutable, but a Strin ...

  6. Atitit 通用接口的设计与实现attilax 总结

    Atitit 通用接口的设计与实现attilax 总结 1.1. 现存的情况1 1.2. 接口返回类型,与返回序列化格式1 1.3. 异常传递 代替返回值模式1 1.4. 通用接口原理1 1.5. A ...

  7. xilinx IP核配置,一步一步验证Xilinx Serdes GTX最高8.0Gbps

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010161493/article/details/77658599   目录(?)[+]   之前 ...

  8. 如何正确的重写equals() 和 hashCode()方法

    比较两个Java对象时, 我们需要覆盖equals和  hashCode. public class User{ private String name; private int age; priva ...

  9. MySQL内置函数获取几天前的日期

    如何采用mysql内置函数获取指定时间之前的日期呢? SELECT something FROM table_name WHERE DATE_SUB(CURDATE(),INTERVAL 30 DAY ...

  10. DIOCP开源项目-高效稳定的服务端解决方案(DIOCP + 无锁队列 + ZeroMQ + QWorkers) 出炉了

    [概述] 自从上次发布了[DIOCP开源项目-利用队列+0MQ+多进程逻辑处理,搭建稳定,高效,分布式的服务端]文章后,得到了很多朋友的支持和肯定.这加大了我的开发动力,经过几个晚上的熬夜,终于在昨天 ...