vue-router 路由基础的详解
vue-router 路由基础的详解今天我总结了一下vue-route基础,vue官方推荐的路由。 一、起步HTML 简单路由
// 渲染出口 创建模板(组件): (也可以用import 引入外部组件) 我是foo 组件"};
var bar={template:"
我是bar 组件 "};组件注入路由: 创建路由实例: 注意这里 routes 没有 ‘ r ' (不要写成 routers) 创建vue实例(并挂载实例) 二、动态路由匹配有时候我们需要的是模板结构一样,当时数据不一样,就相当于我们要把不同ID的登录用户连接到同一个页面,但要显示每个用户的独立信息,这时我们就用到了动态路由匹配。 动态路由主要用到了全局 $route.params 和路由的动态参数,全局route 的 params API 存储着 路由的所有参数,路径的参数用 “ : ”来标记: HTML JS 我的ID是{{ $route.params.id }}',// 在路由切换时可以观察路由
watch:{
'$route'(to,form){
console.log(to); //要到达的
console.log(form);
}
}
}
const router = new VueRouter({ var myVue = new Vue({ 三、嵌套路由1.嵌套路由讲的是我们可以在 例如: HTML: JS: 我的ID是{{ $route.params.id }} // 子路由 我是 userChildOne '} const userChildTwo = { template:' 我是 userChildTwo '} const router = new VueRouter({ routes:[ {path:'/user/:id',component:User,children:[ // 用法和参数和routes 一样 {path:"/user/childone",component:userChildOne},{path:"/user/childtwo",component:userChildTwo} ]
] var myVue = new Vue({ 四、命名路由1.给路由命名指定路路由跳转,要用到参数name 和 v-bind HTML: JS: 我的ID是{{ $route.params.userId }}',watch:{
'$route'(to,form){
console.log(to);
console.log(form);
}
}
}
const router = new VueRouter({ var myVue = new Vue({ 五、命名视图1.给渲染视图 router-view 命名,来制定让那个视图渲染组件 HTML: JS: 我是one,ID是{{ $route.params.userId }}',}
const UserB = {
template:'
我是two,} const UserC = { template:' 我是three,ID是{{ <1ro>1ro>ute.params.userId }} ',} const UserD = { template:'我是four,} const router = new VueRouter({ routes:[ // name 一一对应上 { path:'/user/:userId',components:{ // 注意这里为components 多个“ s ” default:UserA,b:UserB } },{ path:'/user/:userId',components:{ default:UserD,b:UserC } } ] }); var myVue = new Vue({ 六、重定向 和 别名重定向 和别名,首先我先来解释一下什么叫做重定向和别名 『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b, 『别名』 /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。 重定向主要用参数:redirect 而别名主要用到参数: alias HTML: 效果查看地址栏最后面的变化
JS: 我是同一个页面',}
const router = new VueRouter({
mode:"history",routes:[
{ path:'/User/foo',{ path:'/User/bar',redirect: '/User/foo',// 重定向的目标也可以是一个命名的路由:
// 甚至是一个方法,动态返回重定向目标:
] var myVue = new Vue({ 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |