vue-router设置默认路由

{
      path:'*', // 任何不存在的路径都会跳转到首页
      // path:'/',
      redirect:'/home', // 路径http://localhost:8080/#/home
      // component:Home // 路径http://localhost:8080/#/
    }

1，安装vue-router

npm i vue-router@3

2，配置路由

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

// 引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
// 配置路由
export default new VueRouter({
  // 配置路由
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/search',
      component:Search
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/register',
      component:Register
    },
    {
      path:'*', // 任何不存在的路径都会跳转到首页
      // path:'/',
      redirect:'/home', // 路径http://localhost:8080/#/home
      // component:Home // 路径http://localhost:8080/#/
    }
  ]
})

src\main.js

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注册路由
  router
}).$mount('#app')

<router-link to="/login">登录</router-link>
<router-link to="/register" class="register">免费注册</router-link>

<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
            搜索
          </button>
<script>
export default {
  name: "Header",
  methods:{
    goSearch(){
      this.$router.push('/search')
    }
  }
};
</script>