<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路由--菜单栏的开发</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<!--路由的基本实现、嵌套路由、路由的传参-->
<body>
<div id="app">
<div>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</div>
<!--路由出口-->
<router-view></router-view>
</div>
<template id="Home">
<!--Vue模板抽离-->
<div>
<p>主页</p>
<router-link to="/home/register">注册</router-link>
<router-link to="/home/login">登录</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<template id="News">
<div>
<p>新闻页</p>
<div>
<router-link to="/newsDetail/1">新闻1</router-link>
<router-link to="/newsDetail/2">新闻2</router-link>
<router-link to="/newsDetail/3">新闻3</router-link>
</div>
<div><!--路由出口-->
<router-view></router-view>
</div>
</div>
</template>
<template id="Register">
<div>
注册功能
</div>
</template>
<template id="Login">
<div>
登录功能
</div>
</template>
<template id="NewsDetail">
<div><!--接收传递的参数-->
{
{$route.params.id}}
</div>
</template>
<script>
//定义组件
const Home = {
template: '#Home'
}
const News = {
template: '#News'
}
const Register = {
template: '#Register'
}
const Login = {
template: '#Login'
}
const NewsDetail = {
template:'#NewsDetail'
}
//定义路由项
const routes = [
{//页面初始化时显示的路由项,根路径的跳转
path: '/',
component: Home//此时去渲染那个组件--主界面
},
{
path: '/home',
component: Home,
children: [ //嵌套路由,子路由项
{path: '/home/register',component: Register},
{path: '/home/login',component: Login}
]
},
{
path: '/news',
component: News
},
{
path: '/newsDetail/:id',
component: NewsDetail//路由跳转时传参
}
]
//定义路由实例
const router = new VueRouter({
routes
})
let vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>
