学习笔记
命名路由：就是给路由取给别名
<!-- //引入 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="{name:'ccc',params:{sex:'男',id:1},query:{id:1}}">导航1</router-link>
<router-link to="/dh2">导航2</router-link>
<!-- // 路由填坑 -->
<router-view></router-view>
</div>
<script type='text/javascript'>
//自定义组件
var dh1 = {
template: `<h1>我是登录==={{$route.params.sex}}==={{$route.query.id}}</h1>`
}
var dh2 = {
template: `<h1>我是注册</h1>`
}
//创建路由实例和设置路由
var router = new VueRouter({
routes: [{
path: '/dh1?id',
name: 'ccc',
component: dh1
}, {
path: '/dh2',
component: dh2
}, ]
});
//vue实例 挂载路由
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
router
});
</script>
二，声明式导航
声明式导航就是通过 a标签（锚链接） 发送hash值进行路由的跳转的
三，编程式导航
编程式导航就是 通过js ，api 方法实现导航
<body>
<!-- //引入js -->
<script type='text/javascript' src='js/vue.js'></script>
<script src="./js/vue-router_3.0.2.js"></script>
<div id='app'>
<!-- //路由链接，通过点击事件触发函数 -->
<ul>
<li @click="dh1">导航1</li>
<li @click="dh2">导航2</li>
<li @click="dh3">导航3</li>
</ul <!-- //填坑 -->
<div>
<router-view></router-view>
</div>
</div>
<script type='text/javascript'>
//自定义组件
var dh1 = {
template: `<h1>我是dh1</h1>`
}
var dh2 = {
template: `<h1>我是dh2</h1>`
}
var dh3 = {
template: `<h1>我是dh3</h1>`
}
//创建组件
var router = new VueRouter({
routes: [{
path: '/dh1',
component: dh1
}, {
path: '/dh2',
component: dh2
}, {
path: '/dh3',
component: dh3
}, ]
});
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
router,
methods: {
dh1() {
this.$router.push({
path: '/dh1',
query: {
id: 1
}
})
},
dh2() {
this.$router.push({
path: '/dh2',
query: {
id: 2
}
})
},
dh3() {
this.$router.push({
path: '/dh3',
query: {
id: 3
}
})
},
},
});
</script>
</body>
发表评论