路由的基本使用
步骤:
1.安装 vue-router 路由模块(引入包)
vue.js
vue-router.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2.创建路由对象
(1)当导入 vue-router 包后, 在 window 全局对象中,就有了一个路由构造函数,叫做 VueRouter;
(2)在 new 路由对象的时候,可以为构造函数,传递一个配置对象 routes :
// 每个路由规则,都是一个对象,这个规则对象必须有两个属性;
// 属性1 是 path ,表示,监听 哪个路由链接地址;
// 属性2 是 component ,表示,如果 路由是前面匹配到的 path ,则展示 component 属性对应的那个组件。
注意: component 的属性值只能放组件模板对象,不能放组件的引用名称
HTML
<div id="app">
<!-- <a href="#/login">登录</a>
<a href="#/register">注册</a> -->
<!-- router-link 默认渲染一个a标签, 用 tag 属性可以设置其他标签 -->
<router-link to="/login" tag="span" class="login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 这是 vue-router 提供的元素,专门用来做占位符的,将来路由规则匹配到的组件,就会展示到这个 router-view 中去 -->
<transition mode="out-in"> <!-- 在路由里面使用动画效果 -->
<router-view></router-view>
</transition>
</div>
JS
<script>
// 组件模板对象
var login = {
template: "<h1>登录组件</h1>"
}
var register = {
template: "<h1>注册组件</h1>"
}
// 2. 创建路由对象,当导入 vue-router 包后, 在 window 全局对象中,就有了一个路由构造函数,叫做 VueRouter
// 在 new 路由对象的时候,可以为构造函数,传递一个配置对象
var routerObj = new VueRouter({
// route 这个配置对象中的 router 表示 【路由匹配规则】的意思
routes: [
// 每个路由规则,都是一个对象,这个规则对象必须有两个属性
// 属性1 是 path ,表示,监听 哪个路由链接地址
// 属性2 是 component ,表示,如果 路由是前面匹配到的 path ,则展示 component 属性对应的那个组件
// 注意: component 的属性值只能放组件模板对象,不能放组件的引用名称
// {path: "/", component: login}, //不推荐
{path: "/", redirect: "login"}, //重定向
{path: "/login", component: login},
{path: "/register", component: register}
],
linkActiveClass: "san-active" //修改激活组件的类名,默认的是 router-link-active ,可以用来做高亮
})
var vm = new Vue({
el: '#app',
data: {
},
router: routerObj, // 3.将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
methods: {
}
});
</script>
CSS
<style>
.router-link-active, .san-active{
color: red;
font-weight: 800;
font-size: 24px;
}
.v-enter, .v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active, .v-leave-active{
transition: all 1s ease;
}
</style>