从零开始的Vue-Router[vue-cli]2020-07-

坚持自己，加油鸭

刚开始看vue文档的时候，被一个自定义实现的路由给迷惑了，我还琢磨了半天，没引入vue-router怎么实现的，这个经历真是有趣
就在这里
https://github.com/chrisvfritz/vue-2.0-simple-routing-example
接下来，跟着官方文档，一步一步走

1.安装vue-router

再此之前，你需要有一个vue-cli创建的项目(自行百度)

✗ npm install vue-router

安装之后，显示版本号表示安装完成

image.png

2.编写要跳转的页面

这里我用了两个页面，一个是page1，一个叫page2
内容如下

page1

<template>
  <div>
    <span>{{message}}</span>
    <img alt="page1 img" src="../assets/page1.jpg" >
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: 'This is Page1 value'
    }
  }
}
</script>

<style>

</style>

page2

<template>
    <div>
    <span>{{message}}</span>
    <img alt="page2 img" src="../assets/page2.jpg" >
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: 'This is Page2 value'
    }
  }
}
</script>

<style>

</style>

3.编写路由文件

在src目录下创建router.js
内容如下

import Vue from 'vue';
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

const routes = [
  {path:"/page1", component: Page1},
  {path:"/page2", component: Page2}
]

const router = new VueRouter({
  routes
})

export default router;

4.将路由文件引入到main.js

import Vue from 'vue'
import App from './App.vue'

import router from './router.js'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
//这里需要注意的是 引入的路由文件 实例名字必须为 router否则会抛出一个找不到方法的错误，也是我踩的一个坑

5.在App.vue中使用路由

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- Vue-路由 -->
    <ul>
      <li><router-link to="/page1">Home</router-link><span>&nbsp;&nbsp;</span></li>
      <li><router-link to="/page2">Home2</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</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>

启动项目看看效果

222.gif