vue-10 router路由

配置：

1. 安装使用 npm install vue-router
2. 添加路由配置文件，例router.js 并在文件中进行路由配置
3. 将路由配置添加到main.js中的vue对象
4. 使用路由

router.js文件
//1、引入基础依赖
import Vue from 'vue'
import Router from 'vue-router'
//2、引入要路由的页面
import Home from '@/views/Home'

//3、将Router插件注册为Vue全局组件
Vue.use(Router)

//4、定义导出的路由
const router = new Router({
  mode: 'history',
  routes: [
    //【重定向匹配】，重定向到/home
    {
      path: '/', name: 'root', redirect: "/home"
    }]}
//4、定义导出的路由
export default router

main.js文件
import Vue from 'vue'
import App from './App.vue'
//5、在main中引入路由组件目录
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //6、将路由添加到Vue对象
  router  
}).$mount('#app')

 

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Home',
  data () {
    return {
      
    }
  }
});
</script>

<template>
  <div id="app">
    <div id="nav">
      <!-- 通过标签使用路由 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/demo_v1">demo_v1</router-link> |
        <!-- 通过方法使用路由 -->
      <input type="button" value="编程式路由" @click="routerDemo1" />
    </div>
    <router-view />
  </div>
</template>


<script>
export default {
  name: "App",
  methods: {
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    routerDemo1() {
      //通过this.router调用路由
      this.$router.push("/demo_v1")
    }
  }
}
</script>



<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}



#nav {
  padding: 30px;



  a {
    font-weight: bold;
    color: #2c3e50;



    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>