vue router基础

在vue中,路由是route,就是一个键值对,路径是key,组件是value;
路由器是router,管理所有的路由
1.安装vue-router,命令 npm i vue-router
2.应用插件:Vue.use(VueRouter)
3.编写router配置项
创建一个全局的路由器router
在文件中创建一个router文件夹,里面写一个名为index.js的文件
文件中的内容为:

//改文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../componments/About'
import About from '../componments/Home'
//创建一个路由器,并将router暴露出去
export default new VueRouter({
    
    
routes:[{
    
    
	path:'/about',
	componment:About
	},
	{
    
    
	path:'/home',
	componment:Home
	}
]
})

4.实现切换(active-class可配置高亮样式)
在App.vue中的a标签改为router-link标签,将href属性改为“to”,将原来写的路径改为’’/about’’(也就是在routes里面写的path),其他之前写的样式原封不动的放在原处
在这里插入图片描述
(这里将原来的active改成了active-class:’‘active’’,就是说,在该元素被激活的时候才有样式)
虽然,我们用的是router-link,但是渲染在浏览器中,仍然是a标签
在这里插入图片描述
以上实现了路由,但是并没有将home.vue和about.vue的内容展示在展示区,
5.指定展示位置
我们需要在指定组件的呈现位置那里写

<router-view></router-view>

在这里插入图片描述
在这里插入图片描述

Vue中借助router-link标签实现路由的切换,通过router-view实现组件的显示。

注意:
1.组件的分类
一般组件和路由组件
一般组件经常放在componments文件夹中,路由组件一般放在pages文件夹中

2.通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载
用上面的home和about组件来举例,当点击home组件的时候about组件去哪了?
答:about组件消失不是被隐藏了,而是被销毁了

3.每个组件都要自己的$route属性,里面存储着自己的路由信息

4.整个应用只有一个router,可以通过组件的$router属性获取到

猜你喜欢

转载自blog.csdn.net/qq_44114147/article/details/122924710