基本路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src='./js/vue2.js'></script> // 下载到本地使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- router地址 -->
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.min.js"></script>
<style type="text/css">
.myClass {
color: red;
font-weight: bold /* 高亮显示-加粗*/
}
</style>
</head>
<body>
// 路由使用id获取组件内容
<template id="temp">
<div>
<p>商品列表</p>
<ul>
<li>生活用品</li>
<li>植物</li>
<li>水果</li>
<li>书籍</li>
</ul>
</div>
</template>
<div id='app'>
<!-- 加载使用路由 -->
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<router-link to='/goods'>商品</router-link>
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
// 定义路由组件内容，一般是一个页面
const login = { template: "<h1>====路由跳转1=====</h1>" }
const register = { template:'<h1>@@@@@@路由跳转2@@@@@@</h1>'}
const goods = {template: '#temp' } // 使用id获取vue组件内容
// 设置路由
const router = new VueRouter({
routes:[
{path:'/login',component:login},
{path:'/register',component:register},
{path:'/goods',component:goods},
],
linkActiveClass:'myClass' // 设置高亮显示
})
const vm = new Vue({
el: '#app', // 获取element元素
router,
})
</script>
</html>
====================================================
子路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src='./js/vue2.js'></script> // 下载到本地使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- router地址 -->
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.min.js"></script>
<style type="text/css">
.myClass {
color: red;
font-weight: bold /* 加粗*/
}
</style>
</head>
<body>
<template id="temp">
<div> <p>商品列表</p> <ul> <li>生活用品</li> <li>植物</li> <li>水果</li> <li>书籍</li> </ul> </div>
</template>
<hr>
<template id="temp1">
<div>
<h1>Longin</h1>
<router-link to='/login/qq'>登录qq验证</router-link>
<router-link to='/login/tel'>登录手机验证</router-link>
<router-view></router-view>
</div>
</template>
<template id="temp2">
<div>REGISTER</div>
</template>
<template id="temp1qq"><div><h2>请输入你的QQ号及密码</h2></div></template>
<template id="templtel"><div><h2>请输入你的电话号码</h2></div></template>
<div id='app'>
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<router-link to='/goods'>商品</router-link>
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
const login = { template: "#temp1" }
const register = { template:'#temp2'}
const goods = {template: '#temp' }
const qq = {template:'#temp1qq'}
const tel = {template:'#templtel'}
// 设置路由
const router = new VueRouter({
routes:[
{path:'/',redirect:'/login'}, // 第一次打开页面进入的目录
{path:'/login',component:login,
children:[
{path:'qq',component:qq}, // 子路由不用加反斜杠
{path:'tel',component:tel}
]},
{path:'/register',component:register},
{path:'/goods',component:goods},
],
linkActiveClass:'myClass' // 设置高亮显示
})
const vm = new Vue({
el: '#app', // 获取element元素
router,
})
</script>
</html>
显示所有路由组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src='./js/vue2.js'></script> // 下载到本地使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- router地址 -->
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.min.js"></script>
<style type="text/css">
.myClass {
color: red;
font-weight: bold /* 加粗*/
}
</style>
</head>
<body>
<template id="temp">
<div> <p>商品列表</p> <ul> <li>生活用品</li> <li>植物</li> <li>水果</li> <li>书籍</li> </ul> </div>
</template>
<hr>
<template id="temp1"><div><h2>iam111 </h2></div></template>
<template id="temp2"><div><h2>iam222 </h2></div></template>
<template id="temp3"><div><h2>iam333 </h2></div></template>
<template id="temp4"><div><h2>iam444 </h2></div></template>
<div id='app'>
<router-view name='lefts'></router-view>
<router-view name='rights'></router-view>
<router-view name='foots' ></router-view>
<router-view name='temp'></router-view>
<!-- <router-link to='/temp'>商品</router-link> -->
</div>
</body>
<script type="text/javascript">
const header = {template: '#temp1'}
const lefts = {template:'#temp2'}
const rights = {template: '#temp3'}
const foots = {template:'#temp4'}
const temp = {template:'#temp'}
// 设置路由
const router =new VueRouter({
routes:[
// {path:'/temp',component:temp}
{path:'/',
components:{
'default':header,
'lefts':lefts,
'rights':rights,
'foots':foots,
'temp':temp
}},
],
linkActiveClass:'myClass' // 设置高亮显示
})
const vm = new Vue({
el: '#app', // 获取element元素
router,
})
</script>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
