vue-router初接触

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("路由路径")