路由的注册

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

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

     <title>Title</title>

     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 </head>

 <body>

 <div id="app">

     <!--<router-link to="/">首页</router-link>-->

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

     <router-link :to="{name: 'home'}">首页</router-link>

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

     <router-link to="/xumingyang?age=77">用户页面</router-link>

     <router-view></router-view>

 </div>

 <script>

     let url = [

         {

             path: "/",

             name: "home",

             component: {

                 template: `<div>

                             <h1>这是首页</h1>

                             <h2>首页内容</h2>

                             </div>

                             `

             }

         },

         {

             path: "/login",

             name: "login",

             component: {

                 template: `

                 <div>

                     <h1>这是登录页面</h1>

                 </div>`

             }

         },

         {

             path: "/:username",

             name: "user",

             component: {

                 template: `<div>

                         <h1>这是用户页面</h1>

                         <p>用户名{{$route.params.username}}</p>

                         <p>年龄{{$route.query.age}}</p>

                         </div>`

             }

         }

     ];

     let my_router =  new VueRouter({

         routes: url,

     });

     const app = new Vue({

         el: "#app",

         router: my_router,

         mounted(){

             // 路由的全部信息

             console.log(this.$route);

             console.log(this.$router)

             console.log(this.$el)

         }

     })

 </script>

 </body>

 </html>

子路由的注册

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <div id="app">

        <router-link :to="{name: 'home'}">首页</router-link>

        <router-view></router-view>

    </div>

    <script>

        let routes = [

            {

                path:"/",

                name:"home",

                redirect:"daien",

                component:{

                    template:`<div>

                        <h1>这是首页</h1>

                        <router-link to="daien">戴恩</router-link>

                        <router-link to="zhangqiangqiang">张强强</router-link>

                        <router-view></router-view>

                    </div>`

                },

                children:[

                    {

                        path:"daien",

                        component:{

                            template:`<div><h1>戴恩</h1></div>`

                        }

                    },

                    {

                        path:"zhangqiangqiang",

                        component:{

                            template:`<div><h1>张强强</h1></div>`

                        }

                    }

                ]

            }

        ];

        let router = new VueRouter({

            routes:routes

        });

        const app = new Vue({

            el:"#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路由（三）

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

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

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

随机推荐

  1. Bitcoin Core钱包客户端的区块数据搬家指南

    最近在饭团(微信中的一个服务号)里教一些朋友学习比特币和区块链技术,为了让大家深刻地理解去中心化网络和钱包等概念,我推荐大家一定要安装经典的Bitcoin Core钱包软件,有些朋友在安装的时候没有留 ...

  2. vue 获取时间戳对象转换为日期格式

    //1. 简单页面展示用<template> <!-- time为时间戳 --> <div>{{time | formatDate}}</div> &l ...

  3. 安装软件出现缺少vcruntime140.dll

    安装VC运行库QQ群:616945527 ->VC目录下

  4. 微信小程序开发(6) SSL证书及HTTPS服务器

    1. 域名 在万网购买,略 2. 云服务器 阿里云购买,略 3. 安装lnmp 使用lnmp.org程序,略 4. 申请证书 阿里云-管理控制台-安全(云盾)-证书服务-购买证书证书类型: 免费型DV ...

  5. luogu 3538/bzoj 2795 Poi2008 哈希+质数结论

    题意:给定一个子串,询问一些子区间内的最短循环节(循环节是越短条件约束越多) 开始一看那就哈希处理然后暴力枚举循环节,然后按照循环节长度暴力向后比较,本地测试40,洛谷60 #include<b ...

  6. 关于PHP建立数据库访问类的封装以及操作php单例模式连接数据库封装类

    建立数据库访问类的封装 <?php   class DBDA {     public $host = "localhost"; //服务器地址     public $ui ...

  7. [机器学习笔记]奇异值分解SVD简介及其在推荐系统中的简单应用

    本文先从几何意义上对奇异值分解SVD进行简单介绍,然后分析了特征值分解与奇异值分解的区别与联系,最后用python实现将SVD应用于推荐系统. 1.SVD详解 SVD(singular value d ...

  8. Cisco Common Service Platform Collector - Hardcoded Credentials(CVE-2019-1723)

    Cisco Common Service Platform Collector - Hardcoded Credentials 思科公共服务平台收集器-硬编码凭证(CVE-2019-1723) htt ...

  9. P2P的原理和常见的实现方式

    参考资料:http://www.cppblog.com/peakflys/archive/2013/01/25/197562.html P2P实现的原理 首先先介绍一些基本概念:    NAT(Net ...

  10. linux 扩展根分区

    参考链接:  http://blog.51cto.com/lubcdc/1763133