<!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>
.home {
background-color: #abc;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/home">首页</router-link>
<!-- 路由出口： -->
<p>出口位置：</p>
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
const Login = {
template: <div>这是 登录 组件</div>
}
const Home = {
template: `
<div class="home">
<h1>这是 后台首页 组件</h1>
<ul>
<li>
<router-link to="/home/user">用户管理</router-link>
</li>
<li>
<router-link to="/home/goods">商品管理</router-link>
</li>
</ul>
<!-- 给子路由切换使用： -->
<router-view></router-view>
</div>
`
}
const User = {
template: `
<div>这是 用户管理 组件</div>
`
}
const Goods = {
template: `
<div>这是 商品管理 组件</div>
`
}
// 创建路由实例
const router = new VueRouter({
// 配置路由规则
routes: [
{ path: '/login', component: Login },
{
// children 属性用来配置子路由：
path: '/home', component: Home, children: [
// 如果添加 /，那么， /user 会独立存在，不与 /home 有形式上的任何关系
// { path: '/user', component: User },
// { path: '/goods', component: Goods },
// 说明：如果不加 /，那么，该路由会与父级路由合并： /home/user
{ path: 'user', component: User },
{ path: 'goods', component: Goods },
]
},
]
})
const vm = new Vue({
el: '#app',
data: {},
// 将路由实例挂到Vue实例中
router
})
</script>
</body>
</html>
网友评论