2021-06-21 Vue Router的完整Demo

理论基于
https://router.vuejs.org/zh/installation.html
学习这个vue-router有2种写demo的方法:

  1. 写一个html,把html和javascript写在一个文件里
  2. 以模块的形式,在一个完整的项目里实现
    以下分别是这2种方法的完整代码:
    第一种方法的实现: 我给这个html取名为simple-version.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Router Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- use router-link component for navigation. -->
        <!-- specify the link by passing the `to` prop. -->
        <!-- <router-link> will be rendered as an `<a>` tag by default -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
</div>
<script>
    // 0. If using a module system, call Vue.use(VueRouter)

    // 1. Define route components.
    // These can be imported from other files
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    // 2. Define some routes
    // Each route should map to a component. The "component" can
    // either be an actual component constructor created via
    // Vue.extend(), or just a component options object.
    // We'll talk about nested routes later.
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = new VueRouter({
        routes
    })

    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({
        router
    }).$mount('#app')

    // Now the app has started!
</script>
</body>
</html>

然后在浏览器打开这个文件即可体会vue-router的功能:
点击'Go to Foo', 下面会出现foo字眼,点击‘Go to Bar’, 下面会出现bar字眼,这是因为在点击router的过程中, <router-view></router-view> 切换嵌入相应的component的内容。

image.png

第二种方法的实现:新建一个vue项目,在项目里以模块化的方式实现
2.1 我用的是webstorm 这个工具,先创建一个vue project:
image.png

2.2
整个实现过程的步骤大概是这样,除了1. 2 其他步骤可以不必按照顺序来。 接下来我解释下这几个步骤在干嘛。
image.png

1.和 2. 给项目安装vue-router, 安装完后,vue-router的信息会被记录到package.json,以便项目安装使用

npm install vue-router
  1. 创建Foo.vue, Bar.vue 这两个组件,如果放到正式项目中,就是我们想要展示的某个子页面。
    他们的内容分别是
<template>
    <div>foo</div>
</template>

<script>
    export default {
        name: "Foo"
    }
</script>

<style scoped>

</style>
<template>
    <div>bar</div>
</template>

<script>
    export default {
        name: "Bar"
    }
</script>

<style scoped>

</style>
  1. 组件创建好了后,那么就可以写要路由到这两个组件的路由信息了。
    修改router.js, 写入路由信息,再此,我要利用创建vue项目默认自带的HelloWorld.vue组件.
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import Foo from '../components/Foo.vue'
import Bar from '../components/Bar.vue'
Vue.use(VueRouter)

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path:'/helloWorld', component: HelloWorld}
]

const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})
 export default router
  1. 默认main.js 挂载的组件为id='app'的组件,即App.vue, 方便起见,我们就修改App.vue,在这上面放路由页面, <router-link> 意味着这里是个路由连接,会检索路由配置;检索到的路由所对应的component信息会被渲染到<router-view></router-view> 这更像一个占位符:
<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/> 我们不在这个页面直接使用HelloWorld了,而到router里使用它-->
<!--    <h1>Hello App!</h1>-->
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
      <router-link to="/helloWorld">HelloWorld</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue' //去掉原本导入的HelloWorld组件,因为此时我们已经在router导入,而通过router-link 就可以导向到HelloWorld.vue了,这里是多余代码

export default {
  name: 'App',
  // components: { //同上,我们不需要在这个页面引用HelloWorld组件
  //   HelloWorld
  // }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. 万事俱备,路由信息已经编写完整,但是现在你看不到路由信息,因为main.js 为入口的地方,生成vue实例的地方,并不知道有router的存在,所以接下来要做的是将router注入到vue实例中:
    router.js 的目的是要利用vue-router生成一个router对象,返回给main.js,在生成vue组件的时候注入使用。
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

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

到这里,你可以在命令行里启动这个项目了:
如何启动呢?查看package.json, 你可以知道启动命令:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

为了测试,我们的命令是npm run serve. 细节需要自己查看package.json scripts节点的作用。

启动完成后,因为我们的项目没有明确指定要绑定的web端口,因此会自动被绑定一个可以用的端口,比如我的是8083
然后可以访问测试了。 以下是分别点击3个链接所出现的结果。


image.png

image.png

image.png

完。

注意: 在项目模式里,不能用html模式里的component:你的router不能写箭头部分


image.png

推荐阅读更多精彩内容