vue路由高级用法
五、路由设置高级用法
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路由高级用法的更多相关文章
- vue路由高级语法糖
1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由 ...
- vue --- watch 高级用法
假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...
- vue watch高级用法
watch是vue组件最常用,最重要的功能之一,我们都知道它最基本的特性就是监听的data对象里的属性变化了,watch就会自动执行. 那它还有什么骚操作呢?下面我带大家看看,菜鸟一枚,如有错误欢迎指 ...
- vue 组件高级用法实例详解
一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...
- .Net core路由高级用法
先说startup中的路由 这里是我们现在用的默认路由,但是在使用当中也有麻烦.总而言之 用的不爽. 使用属性路由:RouteAttribute特性 默认的HomeController下面的Index ...
- vue 组件高级用法（递归组件，内联模板，动态组件，异步组件）
- vue keep-alive保存路由状态2 (高级用法,接上篇)
接上篇 https://www.cnblogs.com/wangmaoling/p/9803960.html 本文很长,请耐心看完分析. 4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我 ...
- VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
随机推荐
- AIX中逻辑卷管理
1.逻辑卷管理 逻辑卷的大小确定: 逻辑卷大小(MB)=PP的大小(MB)*LV包含的LP的个数 LV占用的物理空间(MB)=PP的大小(MB)*LV包含的LP的个数*LV拷贝的副本数 逻辑卷控制 ...
- Ubuntu 16.04 orb-slam2配置
说明:Ubuntu 16.04以及必要的基础软件安装完成之后进行: 1.OpenNI2安装(可选) 安装依赖项: sudo apt--dev freeglut3-dev doxygen graphvi ...
- TypeError: Cannot read property 'splice' of undefined
splice是删除数组里的项,报这个错证明你点前面那个并不是个数组,仔细一看,还真是数组名称写错了
- java ArrayList迭代过程中删除
第一种迭代删除方式: 第二种迭代删除方式: 第三种迭代删除: 第四种迭代删除: 第五种迭代删除: 第六种: ArrayList中remove()方法的机制,首先看源码: 真正的删除操作在fastRem ...
- Linux安装redis，启动配置不生效（指定启动加载配置文件）
一.今天有个同学问我,为什么明明安装了redis,修改了配置,启动的时候,配置还是不生效.如下图是安装后的redis文件图. 二.想加载上图中的redis.conf,进入到src中寻找到启动文件red ...
- LB_GETCURSEL和LB_GETTEXT的使用
case IDC_LIST1: { switch (HIWORD(wParam)) { case LBN_DBLCLK: { HWND hwndList = GetDlgItem(hDlg, IDC_ ...
- shred命令
不做陈冠希必备.... shred --help 用法:shred [选项]... 文件... Overwrite the specified FILE(s) repeatedly, in order ...
- new 做了什么
var a=function(){ this.che1 = function () { console.log(1) } this.che2 = function () { console.log(2 ...
- C/C++中结构体引用中箭头->与点.的区别
1.作用 ->主要用于类类型的指针访问类的成员,而.运算符,主要用于类类型的对象访问类的成员. 举例: class A { public : int member; } A a; //定义一个结 ...
- 网页设计之js
1.JavaScript概述 javaScript与ECMAScript的相爱相杀 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组 ...