vue学习笔记（七）---- vue中的路由
一、什么是路由
- 对于普通的网站来说，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
- 对应单页面的应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面的应用程序的页面跳转主要用hash来处理
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
二、vue-router的安装
官方文档：https://router.vuejs.org/zh/
安装
二、vue-router的基本使用
- 导入vue和 vue-router 组件类库
<script src="../lib/vue-2.6.10.js"></script>
<script src="../lib/vue-router-v3.0.1.js"></script>
- 使用 router-link 组件来导航
<!-- 表示路由链接， router-link 默认渲染为 a 标签 -->
<!-- tag=""可以更换默认标签-->
<router-link to="/login" tag="sapn">登录</router-link>
<router-link to="/reg">注册</router-link>
- 使用 router-view 组件来显示匹配到的组件
<!-- 路由的坑 ，将来用来把匹配到的组件，呈现到这个坑中 -->
<!-- router-view 默认不会被渲染为元素 -->
<router-view></router-view>
- 创建使用
Vue.extend创建组件
方式一：
var login = Vue.extend({
template: '<h3>登录组件</h3>'
});
var register = Vue.extend({
template: '<h3>注册组件</h3>'
});
方式二：
var login = {
template: '<h3>登录组件</h3>'
}
var reg = {
template: '<h3>注册组件</h3>'
}
- 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [ // 路由规则的数组
{ path: '/login', component: login },
// 路由规则 其中， path 表示要匹配的hash值，component 表示对应的hash要展示的 组件对象
{ path: '/reg', component: reg }
// 匹配到的路由组件，如果想要展示给用户，需要在页面上放 <router-view></router-view>
]
})
- 使用 router 属性来使用路由规则
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router : router
//简写成：
router
});
来吧展示：
三、路由匹配规则
点击路由标签，就会修改hash值，当hash值被修改了之后，会被路由规则监听到，如果能找到，就会根据最新的hash值找到路由组件，然后把组件渲染到页面上
所以总的来说就是先触发router-link，然后修改hash值，hash值改变了，就会被路由对象监听到，监听到之后匹配路由规则，然后找到对应的组件然后放到页面上展示
四、设置路由切换高亮效果
方式一：更改.router-link-active的样式
默认被选中的链接就会有这么一个类.router-link-active，这是官方提供的
<style>
.router-link-active {
color: red;
font-weight: bold;
font-style: italic;
font-size: 20px;
text-decoration: underline;
}
</style>
<body>
<div >
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/reg" tag="span">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h3>登录组件</h3>'
}
var reg = {
template: '<h3>注册组件</h3>'
}
var router = new VueRouter({
routes: [
// { path: '/', component: login },
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/reg', component: reg }
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
来吧展示：
方式二：自定义样式取代 .router-link-active 的样式
.my-active {
color: orange;
font-size: 30px;
}
var router = new VueRouter({
routes: [
// { path: '/', component: login },
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/reg', component: reg }
],
linkActiveClass: 'my-active'
// 配置默认被 选中路由的高亮类名的 ， 默认类名为 router-link-active
})
来吧展示：
五、为路由的切换添加动画效果
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.3s ease;
position: absolute;
}
</style>
<transition>
<router-view></router-view>
</transition>
来吧展示：
六、路由传参
1.以 ？ 问号的方式传参
<router-link to="/login?id=10">登录</router-link>
<router-link to="/reg">注册</router-link>
在路由中使用？传参，不需要修改路由规则，不会影响路由链接的跳转
将 ？后面传递的 id值 展示在页面中
var login = {//组件也有自己的生命周期函数，这些函数，和 vm 实例的 生命周期函数一致
template: '<h3>登录组件</h3>',
//组件被创建完成后会调用created()函数
created(){//当 login 组件 中 data 和 methods 初始化完毕后，调用 created
console.log(this)
}
}
var login = {
template: '<h3>登录组件 ---- {{$route.query.id}} </h3>',
created(){
console.log(this)
console.log(this.$route.query.id)
}
}
2.以 / 斜杠的方式传参
<router-link to="/login/18/hui">登录</router-link>
<router-link to="/reg">注册</router-link>
以/ 斜杠方式传参要修改路由规则，表示传递的参数代表什么含义，如下：
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login/:age/:name', component: login },
{ path: '/reg', component: reg }
],
linkActiveClass: 'my-active'
})
var login = {
template: '<h3>登录组件 ---- {{$route.params.age}} ----- {{$route.params.name}}</h3>',
created(){
console.log(this)
}
}
七、路由中使用 props 传参
var login = {
props: ['age', 'name'],
template: '<h3>登录组件 ---- {{age}} ---- {{name}} </h3>',
//组件被创建完成后会调用created()函数
}
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login/:age/:name', component: login,props: true },
//将来匹配到的参数,可以直接通过props来接受
{ path: '/reg', component: reg }
],
linkActiveClass: 'my-active'
})
八、使用 children 属性实现路由嵌套
<div >
<router-link to="/index">这是首页</router-link>
<router-link to="/news">这是新闻页</router-link>
<router-view></router-view>
</div>
<script>
var index = {
template:`<div class="index">
<h3>这是首页</h3>
<router-link to="/index/login">登录</router-link>
<router-view></router-view>
</div>`
//如果只是这样的话,点击登录救只能显示登录的组件,不能显示首页的组件
// 想要实现点击登录能显示首页又能显示登录页，需要使用children来实现路由的嵌套
}
var news = {
template:'<div class="news"><h3>这是新闻页</h3></div>'
}
var login = {
template:'<h3>登录</h3>'
}
var router = new VueRouter({
routes:[
{path:'/index',component:index,
children:[{path:'login',component:login}]},
// {path:'/index/login',component:login},
{path:'/news',component:news}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
})
</script>
来吧展示：
九、命名视图的使用
<style>
html,
body,
h1 {
margin: 0;
padding: 0;
font-size: 20px;
}
.header {
height: 120px;
background-color: darkcyan;
}
.container {
height: 400px;
display: flex;
}
.sidebar {
background-color: orange;
flex: 2;
}
.content {
background-color: pink;
flex: 10;
}
.footer {
background-color: black;
color: white;
height: 100px;
}
</style>
<body>
<div >
<!-- 路由的容器 -->
<router-view name="top"></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<router-view name="bottom"></router-view>
</div>
<script>
const header = {
template: `<h1 class="header">头部区域</h1>`
}
const sidebar = {
template: `<h1 class="sidebar">左侧侧边栏</h1>`
}
const content = {
template: `<h1 class="content">主体内容区域</h1>`
}
const footer = {
template: `<h1 class="footer">尾部</h1>`
}
const router = new VueRouter({
routes: [
// { path: '/', component: header }
{
path: '/', components: {
// 组件名称 : 组件对象
'top': header,
'left': sidebar,
'right': content,
'bottom': footer
}
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
来吧展示：