vue2.0 路由 学习笔记
来源：互联网 发布：javascript 图 顶点 编辑：程序博客网 时间：2024/05/17 04:13
vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 布局
<router-link to="/home">主页</router-link>
<router-view></router-view>
------------------------------------------
路由嵌套:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
:id
:username
------------------------------------------
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 布局
<router-link to="/home">主页</router-link>
<router-view></router-view>
2. 路由具体写法，重定向{path:'*', redirect:'/home'}
<!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> <style> .router-link-active{ font-size: 20px; color: green; } </style></head><body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 组件 var Home={ template:"<h3>我是主页</h3>" } var News={ template:"<h3>我是新闻</h3>" } // 配置路由 var routes=[ {path:'/home',component:Home}, {path:'/news',component:News}, {path:'*',redirect:'/home'} ]; // 生成路由实例 var router=new VueRouter({ routes:routes }) // 把路由挂到vue上 new Vue({ el:"#box", router:router }) </script></body></html>------------------------------------------
路由嵌套:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
<!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> <style> .router-link-active{ font-size: 20px; color: green; } </style></head><body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 组件 var Home={ template:"<h3>我是主页</h3>" } var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li><router-link to="/user/username">某用户</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` } var UserDetail={ template:'<div>我是某用户</div>' } // 配置路由 var routes=[ {path:'/home',component:Home}, { path:'/user', component:User, children:[ {path:'username',component:UserDetail} ] }, {path:'*',redirect:'/home'} ]; // 生成路由实例 var router=new VueRouter({ routes:routes }) // 把路由挂到vue上 new Vue({ el:"#box", router:router }) </script></body></html>------------------------------------------
路由+参数：
/user/strive/age/10:id
:username
:age
路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由，不会往历史记录里面添加
<!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> <style> .router-link-active{ font-size: 20px; color: green; } </style></head><body> <div id="box"> <input type="button" name="" value="添加一个路由" @click="push"> <input type="button" name="" value="替换一个路由" @click="replace"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 组件 var Home={ template:"<h3>我是主页</h3>" } var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li> <router-link to="/user/strive/age/10"> Strive </router-link> </li> <li> <router-link to="/user/blue/age/40"> Blue </router-link> </li> <li> <router-link to="/user/eric/age/70"> Eric </router-link> </li> </ul> <div> <router-view></router-view> </div> </div> ` } var UserDetail={ template:'<div>{{$route.params}}</div>' } // 配置路由 var routes=[ {path:'/home',component:Home}, { path:'/user', component:User, children:[ { path:':username/age/:age', component:UserDetail } ] }, {path:'*',redirect:'/home'} ]; // 生成路由实例 var router=new VueRouter({ routes:routes }) // 把路由挂到vue上 new Vue({ router:router, methods:{ push(){ router.push({path:'/home'}) }, replace(){ router.push({path:'/user'}) } } }).$mount("#box") </script></body></html>------------------------------------------
路由跳转配合 animate.css
<!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> <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <style> .router-link-active{ font-size: 20px; color: green; } </style></head><body> <div id="box"> <input type="button" name="" value="添加一个路由" @click="push"> <input type="button" name="" value="替换一个路由" @click="replace"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <transition name="" mode="" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <router-view></router-view> </transition> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 组件 var Home={ template:"<h3>我是主页</h3>" } var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li> <router-link to="/user/strive/age/10"> Strive </router-link> </li> <li> <router-link to="/user/blue/age/40"> Blue </router-link> </li> <li> <router-link to="/user/eric/age/70"> Eric </router-link> </li> </ul> <div> <router-view></router-view> </div> </div> ` } var UserDetail={ template:'<div>{{$route.params}}</div>' } // 配置路由 var routes=[ {path:'/home',component:Home}, { path:'/user', component:User, children:[ { path:':username/age/:age', component:UserDetail } ] }, {path:'*',redirect:'/home'} ]; // 生成路由实例 var router=new VueRouter({ routes:routes }) // 把路由挂到vue上 new Vue({ router:router, methods:{ push(){ router.push({path:'/home'}) }, replace(){ router.push({path:'/user'}) } } }).$mount("#box") </script></body></html> 0 0
- vue2.0 路由 学习笔记
- Vue2.0学习笔记
- VUE2.0学习笔记
- Vue2.0 学习笔记
- Vue2.0学习笔记--介绍
- vue2.0——路由
- vue2.0路由--vue-router
- vue2.0路由的配置
- vue2.0学习笔记 ——computed
- vue2.0学习笔记 ——methods
- vue2.0学习笔记 ——watch
- vue2.0 vue-router学习笔记
- vue2 学习笔记
- Vue2 路由
- vue2.0 动态路由传参方法
- vue2.0 路由不显示router-view
- vue2.0路由及兄弟组件通信
- Vue2.0路由动态路径的绑定
- git rebase -i 汇合提交
- 算法分析之动态规划一
- java通过SMTP发送QQ邮件的完全步骤
- 4-7 统计某类完全平方数
- 汇编实验1：环境搭建与Debug使用
- vue2.0 路由 学习笔记
- Kerberos原理
- git rebase -i 修改提交
- SPOJ SERGRID Grid BFS搜索算法
- videojs集成--播放rtmp流
- Android NDK开发
- zopfli无损压缩工具使用
- Mysql基础操作
- GB28181技术基础之2
