[JavaScript知识库]vue router在项目中的使用

步骤

1. 下载

// yarn命令
yarn add vue-router

// npm命令
npm install vue-router

// vue-cli 命令
vue add router

2. 配置

// src/router/index.js
// 路由 - 相关模块
import Vue from "vue"
import VueRouter from "vue-router"
import Layout from "@/views/Layout/index.vue"
import Home from "@/views/Home"
import Search from "@/views/Search"
import Play from "./../views/Play"

// 路由 - 注册
Vue.use(VueRouter)
// 路由- 规则数组  
const routes = [
  {
    path: '/',          // 网页打开时默认的跟路由  
    redirect: '/layout' // 强制重定向路径
  },
  {
    path: '/layout',
    component: Layout,
    redirect: '/layout/home', // 二级路由 
    children: [
      {
        path: 'home',
        component: Home
      },
      {
        path: 'search',
        component: Search
      }
    ]
  },
  {
    path: '/play',
    component: Play
  },
]

// 生成路由对象
const router = new VueRouter({
  routes
})

// 导出
export default router

// main.js
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')

3. 使用
   

// 路由挂载点
<router-view></router-view>

4. 效果