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

    
    






    
Hello App!
    

        
        
        
        Go to Foo
        Go to Bar
    
    
    
    

然后在浏览器打开这个文件即可体会vue-router的功能：
点击'Go to Foo'， 下面会出现foo字眼，点击‘Go to Bar’， 下面会出现bar字眼，这是因为在点击router的过程中， 切换嵌入相应的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

3. 创建Foo.vue, Bar.vue 这两个组件，如果放到正式项目中，就是我们想要展示的某个子页面。
   他们的内容分别是

4. 组件创建好了后，那么就可以写要路由到这两个组件的路由信息了。
   修改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

5. 默认main.js 挂载的组件为id='app'的组件，即App.vue， 方便起见，我们就修改App.vue，在这上面放路由页面， 意味着这里是个路由连接，会检索路由配置；检索到的路由所对应的component信息会被渲染到 这更像一个占位符：

6. 万事俱备，路由信息已经编写完整，但是现在你看不到路由信息，因为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