vue-router：嵌套路由的使用方法

最新推荐文章于 2022-09-12 16:39:05 发布

weixin_30293135

最新推荐文章于 2022-09-12 16:39:05 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ourLifes/p/7603311.html

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>


<template id="home">

<div>
<h2>首页</h2>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>

<router-view></router-view>
</div>
</template>

<template id="news">
<div>新闻</div>
</template>

<template id="login">
<div>登录界面</div>
</template>
<template id="reg">
<div>注册界面</div>
</template>

<script type="text/javascript">
// 1. 定义（路由）组件。
const Home = { template: '#home' };
const News = { template: '#news' };

const Login = { template: '#login' };
const Reg = { template: '#reg' };

// 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News}
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#box')

// 现在，应用已经启动了！
</script>
</body>
</html>

转载于:https://www.cnblogs.com/ourLifes/p/7603311.html

weixin_30293135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router：嵌套路由的使用方法

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="https://...
复制链接

扫一扫