五、路由设置高级用法
alias 别名
{path:'/list',component:MyList,alias:'/lists'}
redirect 重定向
{path:'/productList',redirect:'/list'}
path:'*' 异常处理
{path:'*',component:'NotFound'}

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>重定向和别名</title>

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

<!-- 引入文件 -->

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

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

<!--通过router-view指定盛放组件的容器  -->

        <router-view></router-view>

    </div>

    <script>

        var testLogin = Vue.component("login",{

            template:`

                <div>

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

                </div>

            `

        })

        var testRegister = Vue.component("register",{

            template:`

                <div>

                    <h1>这是我的注册页面</h1>

                </div>

            `

        })

        var NotFound = Vue.component("not-found",{

            template:`

                <div>

                    <h1>404 Page Not Found</h1>

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

                </div>

            `

        })

        //配置路由词典

        const    myRoutes =[

            {path:'',component:testLogin},

            {path:'/myLogin',component:testLogin},

            {path:'/myRegister',component:testRegister},

            //别名，在地址栏输入myRegister和login都会访问testRegister这个组件

            {path:'/myRegister',component:testRegister,alias:"/login"},

            //重定向,在地址栏中输入haha相当于输入myRegister---->testRegister

            {path:'/haha',redirect:'/myRegister'},

            //异常处理,输入没有的会访问404页面

            {path:"*",component:NotFound}

        ]

        const myRouter = new VueRouter({

            //myRoutes可以直接用上面的数组替换

            routes:myRoutes

        })

        new Vue({

            router:myRouter,

            el:"#container",

            data:{

                msg:"Hello VueJs"

            }

        })

    </script>

 </body>

</html>

vue路由高级用法的更多相关文章

  1. vue路由高级语法糖

    1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由 ...

  2. vue --- watch 高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...

  3. vue watch高级用法

    watch是vue组件最常用,最重要的功能之一,我们都知道它最基本的特性就是监听的data对象里的属性变化了,watch就会自动执行. 那它还有什么骚操作呢?下面我带大家看看,菜鸟一枚,如有错误欢迎指 ...

  4. vue 组件高级用法实例详解

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...

  5. .Net core路由高级用法

    先说startup中的路由 这里是我们现在用的默认路由,但是在使用当中也有麻烦.总而言之 用的不爽. 使用属性路由:RouteAttribute特性 默认的HomeController下面的Index ...

  6. vue 组件高级用法（递归组件，内联模板，动态组件，异步组件）

  7. vue keep-alive保存路由状态2 (高级用法,接上篇)

    接上篇 https://www.cnblogs.com/wangmaoling/p/9803960.html 本文很长,请耐心看完分析. 4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我 ...

  8. VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

    一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...

  9. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

随机推荐

  1. 006-saltstack之远程执行

    1.目标 2.执行模块 3.返回 salt ‘*’ cmd.run ‘uptime’ 命令 目标 执行模块 执行模块参数 1.SlatStack远程执行–目标 执行目标:https://docs.sa ...

  2. oracle高水位降低法

    1.什么是高水位?(high water mark 简称:HWM)     所有的oracle段(segments,在此,为了理解方便,建议把segment作为表的一个同义词)都有一个在段内存放数据的 ...

  3. ArrayList与LinkedList的区别

    两者区别大致分为以下几点: 1.ArrayList采用的是采用的是数组形式保存数据,这种方式将对象放在连续的位置中(线性存储):LinkedList采用的将对象放在独立的空间中,每个空间还保留下一个节 ...

  4. python中字符串格式化的两种方法

    知识点汇总;1-字符串格式化输出方法一: % 1-print('名字是 %s,年龄是%s' % (name ,age)) 2- %s ---字符串-----相当于执行了str() 3- (name , ...

  5. 【HDU2089】不要62

    题目大意:求区间 [n,m] 中数位不包含 4 和 62 的数字的个数. 题解:数位dp. 预处理出 \(f[i][j]\) 表示 i 位数字中以 j 为第一位的满足条件的数字个数. 对于统计答案来说 ...

  6. UI控件Telerik UI for ASP.NET MVC全新发布R2 2019 SP1

    Telerik UI for ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验.它主要是针 ...

  7. 【vue-router的基础】history了解一下

    概述 window.onpopstate是popstate事件在window对象上的事件处理程序. 每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如 ...

  8. 《Head First 软件开发》阅读五

    结束开发循环:娟娟细流归大海 几乎完成了任务,而开发循环结束所要面对的问题是用户测试的安排.新的一轮重构和重新设计. 开发循环已经完成,但是还是有很多事情可以去做.系统测试必不可少,但是是由谁来做系统 ...

  9. LeetCode - 乘积最大子串

    给定一个整数数组 nums ,找出一个序列中乘积最大的连续子串(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6. 示例 2: ...

  10. oracle 数据库优化【转载】

    版权声明:本文为CSDN博主「咫尺的梦想ing」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/u01305 ...