在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属性获取到