vue 组件与路由的简单应用
程序员文章站
2022-03-25 11:15:29
...
导入
1、vue.js 2.6.10
2、bootstrap3.7.css
3、vue-router.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>router</title>
<link rel = "stylesheet" href="css/bootstrap3.7/bootstrap.min.css"/>
<!-- 导入vue.js 2.6.10-->
<script src="js/vue.js"></script>
<!-- 引入路由js -->
<script src="js/vue-router.js"></script>
<style>
/* 1.根据这个定义样式 */
.router-link-active{color: red;font-weight: 800;font-size: 2rem;}
</style>
</head>
<body>
<div id="app" class="col-lg-10">
<!-- <a href="#/login">登陸</a>
<a href="#/register">注冊</a> -->
<!-- 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/login"> login</router-link>
<router-link to="/register"> register</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<template id="loginsdemo">
<div> <!-- 嵌套路由 -->
<h1>这是登陆组件</h1>
<router-link to="/login/logindemo">登陆组件</router-link>
<router-view></router-view>
</div>
</template>
<template id="registersdemo">
<div> <!-- 嵌套路由 -->
<h1>这是注册组件</h1>
<router-link to="/register/registerdemo">注册组件</router-link>
<router-view></router-view>
</div>
</template>
<script>
var login = {template:'#loginsdemo'}
var register = {template:'#registersdemo'}
var logindemo = {template:'<p>logindemos</p>'}
var registerdemo = {template:'<p>lregister demos</p>'}
//创建一个路由对象 当导入vue-router包之后,在window全局对象中,就有一个路由的构造函数叫做VueRouter
var routerObj = new VueRouter({
//route 这个配置对象中的routes表示[路由匹配规则]的意思
routes: [
//路由匹配规则有两个必须的属性
//属性1 是path 表示监听,哪个路由链接地址
//属性2 是component,表示如果路由是前面匹配到的path,则展示component属性对应;
//注意:component 的属性值,必须是一个组件的模板对象,不能是组件的引用名称
//{path:'/',redirect:'/login' },// 打开默认，强制重定向
{
path:'/login',
component:login,
children:[
{path:'/login/logindemo',component:logindemo}
]
},
{
path:'/register',
component:register,
children:[ //children 配置就是像 routes 配置一样的路由配置数组
{path:'/register/registerdemo',component:registerdemo}
]
}
],
/* 2.也可以 自己配置class */
linkActiveClass:'btn btn-success'
});
//创建vue实例得到vienmodel
var vm = new Vue({
el:"#app",
router:routerObj //将路由规则对象,注册到vm 实例上,用来监听url地址的变化,然后展示对应组件
});
</script>
</body>
</html>
上一篇： vue-router学习
下一篇： VUE-前端路由的简单使用