Vue Cli脚手架实现简单的路由跳转

Vue Cli脚手架实现简单的路由跳转

我也是刚入门，所以写的比较小白，如果有错误欢迎指正

下面就是教程：

• 首先在src/components文件夹下创建一个页面，如下

tryDemo.vue文件

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'tryDemo',
  data () {
    return {
      msg: 'Vue Hello'
    }
  }
}
</script>

<style>
</style>

• 接着在src/router文件夹下的index.js文件（这个文件是脚手架创建的）引用并设置

index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import tryDemo from '@/components/tryDemo.vue'//引用我们创建的文件

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  //这里设置一个新的路由地址
  {
    path: '/tryDemo',
    name: 'tryDemo',
    component: tryDemo
  }
  ]
})

• 最后在src文件夹下的App.vue文件使用刚刚的路由并跳转到我们创建的页面

拓展：
<router-link> 组件支持用户在具有路由功能的应用中点击导航，用 to 来指定目标地址，也可以通过 tag 来设置成某些标签，默认是 a 标签。
<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时， 中的内容也会发生更改。

App.vue文件

<template>
  <div id="app">
    <router-link to="/">Back</router-link><!-- 点击返回默认主页 -->
    <router-link to="/tryDemo">tryDemo</router-link><!-- 点击跳转我们创建的页面 -->
    <router-view/><!-- 渲染内容 -->
  </div>
</template>

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

这样就完成了，当然，这只是非常简单的一种方法。
如果有些地方不清楚或者想知道更详细的朋友，可以查询官方文档或去百度看大神写的资料。