学习笔记
1.动态路由 ，可以在路由模块 创建很多 ，但是都用一个组件
<!-- 引入js文件 -->
<script type='text/javascript' src='js/vue.js'></script>
<script src="./js/vue-router_3.0.2.js"></script>
<div id='app'>
<!-- //路由模块 -->
<router-link to="/login/id=1">登录入口1</router-link>
<router-link to="/login/id=2">登录入口2</router-link>
<router-link to="/login/id=3">登录入口3</router-link>
<router-link to="/zc/1">zc1</router-link>
<!-- //路由填坑 -->
<router-view></router-view>
</div>
<script type='text/javascript'>
//自定义组件
var login = {
template: `<div>我是login{{$route.params.id}}</div>`
};
var zc = {
template: `<div>我是zc</div>`
};
//创建路由实例和设置路由情况
var router = new VueRouter({
routes: [{
path: '/login/:id',
component: login
}, {
path: '/zc/:id',
component: zc
}]
});
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
router
});
</script>
vue路由动态传值，
1.通过 props 接收 id 传值
//创建路由实例和设置路由情况
var router = new VueRouter({
routes: [{
path: '/login/:id',
component: login,
props: true
}, {
path: '/zc/:id',
component: zc
}]
});
2.通过设置 路由实例 上的props 发送 对象 数据，在接收数据方通过 props接收数据（却点不能传id）
//创建路由实例和设置路由情况
var router = new VueRouter({
routes: [{
path: '/login/:id',
component: login,
props: {
username: '张三',
pwd: 123
}
}, {
path: '/zc/:id',
component: zc
}]
});
3.通过设置 路由实例上的 props 发送 函数数据 ，在接收一方通过props接收
//创建路由实例和设置路由情况
var router = new VueRouter({
routes: [{
path: '/login/:id',
component: login,
props: () => {
return {
id: id,
name: '张三',
pwd: 123
}
}
}, {
path: '/zc/:id',
component: zc
}]
});
//创建路由实例和设置路由情况
var router = new VueRouter({
routes: [{
path: '/login/:id',
component: login,
props: () => {
({
id: id,
name: '张三',
pwd: 123
})
}
}, {
path: '/zc/:id',
component: zc
}]
});
