Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

    <!--1、引入vue-router（核心插件）-->

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

</head>

<body>

    <div id="app"></div>

    <script type="text/javascript">

        let Login = {

            template:`<div>

                        <h1>我是登录界面</h1>

                    </div>`

        }

        let Register = {

            template: `<div>

                        <h1>我是注册界面</h1>

                     </div>`

        }

        //2、安装插件  =>?

        Vue.use(VueRouter);

        //3、创建路由对象

        let router = new VueRouter({

            //4、配置路由对象

            routes:[{

                path:"/login",

                component:Login

            },{

                path:"/register",

                component:Register

            }]

        })

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

        let App = {

             template:`

                  <div>

                      <!--vue内置组件-->

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

                      <router-link to="/register">注册</router-link>

                      <router-view></router-view>

                  </div>`

        }

        new Vue({

            el:"#app",

            template:`<app/>`,

            components:{

                app:App

            },

            router:router

        })

    </script>

</body>

</html>

执行效果

具体使用请参考

官网文档

使用Vue-Router路由的更多相关文章

  1. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. Vue系列：Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  3. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  4. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  5. Vue Router 路由守卫：完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  6. Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  7. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  8. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. vue router路由（三）

    当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...

  10. vue router路由跳转了，但是页面没有变（已解决）

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

随机推荐

  1. soapui的简单使用

    工具下载地址:https://www.soapui.org/downloads/soapui.html 名词解释 https://www.cnblogs.com/fcfblog/p/5830205.h ...

  2. Extjs相关知识

    1.链接 1.1.零散知识链接 https://blog.csdn.net/zhaojianrun/article/details/70141071 https://www.cnblogs.com/p ...

  3. Azkaban 使用问题及解决(一)

    什么是Azkaban Azkaban是一款基于Java编写的任务调度系统 任务调度:有四个任务脚A.B.C.D,其中任务A与任务B可以并行运行,然后任务C依赖任务A和任务B的运行结果,任务D依赖任务C ...

  4. @JSONField使用

    参考博客:http://www.cnblogs.com/yucy/p/9057049.html 1.经常遇到这种情况,传过来json的key名和我们javaBean的属性名不一样,导致接收不到: Ch ...

  5. 7.6.2 break 语句

    7.6.2 break 语句 程序执行到循环中的break语句时,会种植包含它的循环,并继续执行下一阶段. 如果break语句位于嵌套循环内,它只会影响包含它的当前循环. break还可用于因其他原因 ...

  6. [UE4]插值interp

    插值 在两个数之间补充一些数,让过渡变得更自然. UE4引擎提供的插值 一.CInterp To:颜色(Color)插值.C:Color,颜色. 二.FInterp To.FInterp To Con ...

  7. [UE4]VR手柄按键参考

    一.VR手柄按键 二.Gamepad菜单往下拉 三.Shouder Button,在一般游戏当中是用作菜单键,按一下Shouder Button会出现游戏菜单. 四.Face Buttons:可以触摸 ...

  8. MindFusion 中节点关键路径的遍历

    工作中总能遇到 一些 奇葩的需求,提出这些奇葩需求的人,多半也是奇葩的人,要么不懂相关的计算机软件知识,要么就是瞎扯蛋,异想天开,然而这些奇葩的需求,我也总能碰到.言规正传,在一次项目中,使用了 Mi ...

  9. 获取物理内存total值和used值

    1.使用 free -m 查看 2.物理内存total值 # free -m | grep Mem | awk '{print $2}' 3.物理内存used值 # free -m | grep Me ...

  10. 听说jupyter notebook代码提示不友好？

    作为一个业余的Python爱好者,我是一只在使用着最省事的pycharm 尽管以前见好多大牛都用过 但是今天又看到关于jupyter notebook的推送了,于是就尝试了一下 这好像也就是jupyt ...