vue-router的介绍
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
vue——router的引入
首先使用如下命令进行vue-router的安装
npm install vue-router@4
安装以后再main.js中引入vue-router
//引入vue-router
import router from './router'
引入之后再把其挂载到根节点上
new Vue({
router, //挂载vue-router
render: h => h(App)
}).$mount('#app')
vue-router的配置
在src目录下创建router子目录,再在其下创建文件index.js,其配置如下
import Vue from 'vue' //引入vue
import VueRouter from 'vue-router' //引入vue-router
import HomeView from '../views/HomeView.vue' //引入路由组件
Vue.use(VueRouter) //使用vue-router
const routes = [
{
path: '/',
name: 'home',
component: HomeView
}
]
const router = new VueRouter({
mode: 'history', //路由模式,分为history模式和hash模式
base: process.env.BASE_URL,
routes
})
export default router
在页面中使用vue-router
使用标签来进行路由跳转
使用<router-view />来引入路由页面,使用标签<router-link to=“/”>Go to Home</router-link>来实现路由的跳转
使用JS方法来进行路由跳转
this.$router.push("路由路径")