零基础学习Vue: 第34课 使用Vue的路由vue-router：
零基础学习Vue: 第34课 Vue的路由：
router-link 组件的属性：
- to 指定跳转的地址
- tag 改变组件在页面中的标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 7.通过路由实现跳转 -->
<!-- 第1种路由跳转方法 -->
<a href="#/home">首页</a>
<!-- 第2种路由跳转方法 router-link定义页面的点击部分 tag设置标签的显示类型 -->
<router-link :to="{path:'/home'}" tag="button">首页</router-link>
<!--第3种路由跳转方法 通过路由path跳转 query传递数据 -->
<router-link :to="{path:'/home',query:{a:1}}" tag="button">首页</router-link>
<!--第4种路由跳转方法 通过name跳转 -->
<router-link :to="{name:'userlink'}" tag="button">用户中心</router-link>
<!-- router-view跳转页面的显示部分 -->
<router-view></router-view>
</div>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入vue-router路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//2.定义子组件home
let home = {
template:'<div>首页</div>',
created(){
console.log(this.$route.query) //输出query传递的数据
}
}
//3.定义子组件user
let user = {
template:'<div>用户中心</div>'
}
//4.设置路由和组件的映射表
let routes = [ //路由和组件的映射表
{path:'/home',name:'homelink',component:home},
{path:'/user',name:'userlink',component:user},
//redirect 重定向 当路径为空时默认显示/home路由的组件
{path:'*',redirect:'/home'}
];
//5.实例化路由对象
let router = new VueRouter({
routes
})
//1.创建根组件
let vm = new Vue({
el:'#app',
router //6.注册路由
})
</script>
</body>
</html>