vue-router基本使用和404组件路由和hash,历史模式

第一步,下载vue-router

yarn add vue-router

第二步,main.js 入口：需要配置下

import Vue from 'vue'
import App from './App.vue'

// ***** 引入路由 
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件  @ 默认为src路径  
import Layout from '@/views/Layout'
import Home from '@/views/Home'
import Search1 from '@/views/Search'
import Play from '@/views/Play'
//导入404组件
import P404 from './views/404.vue' //P404位置是变量名,不能为404

//****** vant 组件
import {
  Tabbar,
  TabbarItem,
  NavBar
} from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(NavBar);

// ***************** 导入axios,设置基础路径
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'
Vue.prototype.$axios = axios

// 创建路由规则数组。及引入组件
const routes = [
  // 一级路由 重定向
  {
    path: '/',
    redirect: '/layout'
  },
  {
    //路由
    path: '/layout',
    // 组件 注意组件名不带引号 
    component: Layout,
    //二级路由 (二级路由有多个时需要再重定向)
    redirect: '/layout/home',
    //二级路由 children
    children: [
      {
        path: 'home',
        component: Home
      },
      {
        path: 'search',
        component: Search1,
      }
    ]
  },
  {
    path: '/play',
    name:'playOne' //别名,当路径pat原有名字太长时.可以用别名
    component: Play,
  },
  
    // 写在最后：找不到路由地址  -----> 404路径  
  {
    path: "*",
    component: R404
  }
]
//实例化对象 router
const router = new VueRouter({
  routes,
  // 历史模式：没有#
   // hash路由例如:  http://localhost:8080/#/home
  //history路由例如: http://localhost:8080/home  (以后上线需要服务器端支持, 否则找的是文件夹) 
  
  // mode: "history"  //打包上线后需要后台支持,
})

Vue.config.productionTip = false

new Vue({
  router,  //挂载到vue上,不要忘了这一步
  render: h => h(App),
}).$mount('#app')