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')

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值