文章目錄

• • 1、安裝
  • 2、配置路由
  • 3、修改App.vue
  • 4、使用

💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣

思路清晰，一步到位

💣 💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣

1、安裝

npm install vue-router

2、配置路由

📖在自己工程目錄src下新建一個文件夾router，然后新建js文件index.js，并加入以下內容：

在constantRouterMap 里面加路由就行，你隨意，我不管！

import Vue from 'vue' import Home from '@/views/home' import Router from 'vue-router'Vue.use(Router)export const constantRouterMap = [{path: '/',component: Home,children: [{path: '/', component: () => import('@/views/home')},]} ]const router = new Router({routes: constantRouterMap })export default router

3、修改App.vue

💣主要是在<div id="app">中加上<router-view/>

<template><div id="app"><router-view/> </div> </template> <script>export default {name: 'App'} </script><style></style>

4、使用

💣來到入口文件main.js中，將自己的路由加入到Vue實列中

import Vue from 'vue' import App from './App.vue' import router from './router'//看這兒，這個是自己定義的路由路徑，別寫錯了Vue.config.productionTip = false new Vue({router,//看這兒render: h => h(App), }).$mount('#app')

一個字，巴適！

總結

以上是生活随笔為你收集整理的只需要4步即可在vue2中使用路由router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。