Vue路由的最基本的使用

• vue-router的基本使用
  在index.js文件中导入vue和vue-router
  • 引入vue
    import Vue from 'vue'
  • 导入vue-router
    import VueRouter from 'vue-router'
• 模块化机制，使用Router
  • Vue.use(VueRouter)
• 创建路由器对象

  const router = new VueRouter({
      mode:"history",//请求的路由不带#号
      routes:[
          {
              path:"/about",
              component:About
          },
          {
              path:"/home",
              component:Home
          },
          {
              path:"/",
              component:Home
          }
      ]
  })
  export default router;
  

• 在main.js文件中挂载router到vue实例中

  new Vue({
    router, //4、挂载到vue的实例中
    render: h => h(App)
  }).$mount('#app')
  

• 代码展示
  • main.js

  import Vue from 'vue'
  import App from './App.vue'
  Vue.config.productionTip = false
  import router from './router'
  new Vue({
    render: h => h(App),
    router, //所有对象都能通过$router属性获取路由器对象
  }).$mount('#app')
  

  • router下的index.js

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import About from '../pages/About.vue'
  import Home from '../pages/Home.vue'
  Vue.use(VueRouter)
  const router = new VueRouter({
      //hash 默认(不写)请求的路径带#号,每次查找路径的是都是从根目录下开始查找
      //history 请求的路由不带#号,每次查找路径的时候是从当前路径下开始查找
      mode:"history",
      routes:[
          {
              path:"/about",
              component:About
          },
          {
              path:"/home",
              component:Home
          },
          {
              path:"/",
              component:Home
          }
      ]
  })
  export default router;
  

  • App.vue

  <template>
      <div>
          <router-link to="/about">About</router-link><br/>
          <router-link to="/home">Home</router-link>
          <router-view></router-view>
      </div>
  </template>
  <script>
  export default {
      name: "App",
  };
  </script>
  <style scoped>
  </style>
  

  • pages下的About.vue

  <template>
    <div>
        About
    </div>
  </template>
  <script>
  export default {
      name: "About",
  };
  </script>
  <style scoped>
  </style>
  

  • pages下的Home.vue

  <template>
      <div>
          Home
      </div>
  </template>
  <script>
  export default {
      name: "Home",
  };
  </script>
  <style scoped>
  </style>