[JavaScript知识库] vue-router学习

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue-router学习 -> 正文阅读

[JavaScript知识库]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>标签承接输出的路由内容：