<!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-exact-active,
.router-link-active {
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<ul>
<li><router-link to="/index">首页</router-link></li>
<li><router-link to="/user">用户管理</router-link></li>
<li><router-link to="/login">登录页</router-link></li>
</ul>
<hr />
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 组件
const Index = {
template: `
<div>我是首页</div>
`
}
const User = {
template: `
<div>
我是用户管理
<router-link to="/user/add">添加</router-link>
<router-link to="/user/delete">删除</router-link>
<hr>
<router-view />
</div>
`
}
const UserAdd = {
template: `
<div>我是用户添加管理</div>
`
}
const UserDelete = {
template: `
<div>我是用户删除管理</div>
`
}
const Login = {
template: `
<div>我是登录页</div>
`
}
const router = new VueRouter({
routes: [
// 路由规则
{ path: '/', redirect: '/index' },
{ path: '/index', component: Index },
{
path: '/user',
component: User,
children: [
{ path: 'add', component: UserAdd },
{ path: 'delete', component: UserDelete }
]
},
{ path: '/login', component: Login }
]
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
router
})
</script>
</body>
</html>
vue-router基本使用步骤
最新推荐文章于 2022-05-05 18:04:56 发布