编写使用路由的 3 步

  1. 定义路由组件
    import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 利用 component 动态引入组件
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children: [
      {
        // 直接写全或者写 a，不要写 /a
        path: '/about/a',
        component: () => import(/* webpackChunkName: "hello" */ '../views/Hello.vue')
      }
    ]
  }
]
	
const router = new VueRouter({
  // hash利用的是 onhashchange 事件
  // history利用的是 onpopstate 事件和 pushstate、replaceState 方法
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active',// 重命名全局配置，活跃link
  linkExactActiveClass: 'qq'// 重命名全局配置，精确匹配活跃link
})

export default router
  2. 注册路由
    /* 入口 js */
import Vue from 'vue'
import App from './App.vue'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App }, // 映射组件标签
  template: '<App/>', // 指定需要渲染到页面的模板
  router  // 注册路由器
})
  3. 使用路由
    <div>
  <!-- 路由链接 -->
  <router-link to="/about">About</router-link>
  <!-- 用于渲染当前路由组件 -->
  <router-view/>
</div>

$router 和 $route 的区别

  1. $router 是 VueRouter 的实例，包含了一些路由的跳转方法，钩子函数等；

  2. $route：是路由信息对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 编写使用路由的 3 步
  2. 2. $router 和 $route 的区别