一、导入包
注意：导入的包要在vue下边
<title>基本路由的使用</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
二、创建子组件
注意：是在vm实例上边创建
var login = {
template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'
}
var register = {
template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'
}
三、创建一个路由对象
创建路由对象，当导入包之后，在window全局对象中有路由构造函数--VueRouter，在new路由对象时，可以为构造函数传递一个配置对象。
注意1：这个配置对象中的route表示路由匹配规则，每个路由规则，都是一个对象，这个规则对象都有必须的两个属性
1.path，表示监听哪个路由链接的地址
2.component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
注意2：component的属性值，必须为一个组件的模板对象，不能是组件的引用名称
var router = new VueRouter({
routes: [ //路由规则数组
{path: '/login', component: login},
{path: '/register', component: register}
]
})
四、创建 Vue 实例，得到 ViewModel
将路由规则对象注册到vm实例上，用来监听url地址变化，并展示相应的组件
法一：
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
法二：
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
五、在页面中导入容器
由VueRouter提供的元素，用来做占位符，由路由规则匹配到的组件来展示。
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
注意：router-link默认类似于a标签
类似a标签
可以利用tag来修改
<div id="app">
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
修改为span
最终页面结果：
image.png
六、重定向设置初识打开的页面
var router = new VueRouter({
routes: [ //路由规则数组
{path: '/',redirect:'/login'},
{path: '/login', component: login},
{path: '/register', component: register}
],
// linkActiveClass: 'myactive' // 和激活相关的类
})
结果：
打开页面就是我们设置的login，包括导航栏地址
结果
七、给路由设置样式
var router = new VueRouter({
routes: [ //路由规则数组
{path: '/',redirect:'/login'},
{path: '/login', component: login},
{path: '/register', component: register}
],
linkActiveClass: 'myactive' // 和激活相关的类
})
.router-link-active,
.myactive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
结果如下：
设置样式
网友评论