vue学习（49）vue-router(1)

手机游戏开发者 · 2024-10-9 05:16:18

明确：一个路由（route）就是一组映射关系（key - value），多个路由必要路由器（router）进行管理。
前端路由：key是路径，value是组件。
根本利用
- 安装vue-router，下令：npm i vue-router
- 应用插件：Vue.use(VueRouter)
- 编写router设置项:

//引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../components/About'import Home from '../components/Home'//创建router实例对象，去管理一组一组的路由规则const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ]})//袒露routerexport default router

实现切换（active-class可设置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

指定展示位置

<router-view></router-view>

几个注意点
- 路由组件通常存放在pages文件夹，一样平常组件通常存放在components文件夹。
- 通过切换，“隐蔽”了的路由组件，默认是被烧毁掉的，必要的时间再去挂载。
- 每个组件都有本身的$route属性，内里存储着本身的路由信息。
- 整个应用只有一个router，可以通过组件的$router属性获取到。

vue学习（49）vue-router(1)

所属分类: 问答交流

新帖推荐: 30日

推荐作品