Vue Router
Vue Router 还是看官网吧!
一、安装
要想做单页面应用,就必须使用vue-router。
npm install vue-router --save
二、起步
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
main.js
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' // 1.定义 (路由) 组件,可以从其他文件 import 进来 import Vcar from './components/Vcar' import Vhouse from './components/Vhouse' import Vfruit from './components/Vfruit' Vue.use(VueRouter) // 2.定义路由,每个路由应该映射一个组件。 const routes = [ { path: '/car', component: Vcar }, { path: '/house', component: Vhouse }, { path: '/fruit', component: Vfruit }, ] // 3.创建 router 实例,然后传 "routes" 配置,还可以传别的配置参数 const router = new VueRouter({ routes, // 相当于 routes: routes mode: 'history', }) new Vue({ el: '#app', router, // 4.创建和挂载根实例,通过 router 配置参数注入路由,从而让整个应用都有路由功能 render: h => h(App) })
通过注入路由器,我们可以在任何组件内通过 this.$router
访问路由器,也可以通过 this.$route
访问当前路由。
App.vue
<template> <div id="app"> <h3>Hello App!</h3> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/car">car</router-link> <router-link to="/house">house</router-link> <router-link to="/fruit">fruit</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步