vue-router学习

一、最简范式

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>test-vue</title>
  <!-- 导入vue\vue-router包 -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <h1>test test this is index.html content</h1>
    <p>
      <router-link to="/app">use router-link label Go to App.vue</router-link>
      <router-link to="/bar">use router-link label Go to bar文件</router-link>
    </p>
    <router-view></router-view>


  </div>
  <script>
    //1.定义组件
    const App = {
      
      
      template: "<div>app</div>"
    }
    const bar = {
      
      
      template: "<div>bar</div>"
    }
    //2.组件和路由进行一一映射
    const routes = [
      {
      
      
        path: '/app',
        component: App
      },
      {
      
      
        path: "/bar",
        component: bar
      },
    ]
    //3.创建路由实例
    const router = new VueRouter({
      
      
      routes
    })
    //4.创建并挂载根实例
    const app = new Vue({
      
      
      router
    }).$mount('#app')
  </script>
</body>


</html>

二、在vue项目中使用router实现页面跳转过程

创建vue项目后（具体创建过程见vue项目的创建，根目录是这样的：
根据最简范式，对根目录下的文件进行一一对应：
a.定义组件：HelloWorld.vue
b.router的创建：

c.通过Home.vue将组件HelloWorld.vue的内容给到入口文件App.vue中
d.在App.vue文件中利用<router-view>标签承接输出的路由内容：

一、最简范式

二、在vue项目中使用router实现页面跳转过程

おすすめ