vue router路由入门

路由：SPA（单页应用）的路径管理器，webapp的链接路径管理系统

笼统来讲，就是相当于a标签，但是在vue中，都是单页应用，只有一个index.html，所以用router来代替。

 

这是一个基于vue cli脚手架的项目。

 

router文件夹下的index.js配一个路由。

new一个router，routes后面是一个数组，数组元素是对象。

path代表路径，component是组件

import Vue from 'vue' //引入vue组件
import Router from 'vue-router' //引入router组件
import HelloWorld from '@/components/HelloWorld' //引入页面
import Hi from '@/components/Hi'

//全局使用router
Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/hi',
            name: 'Hi',
            component: Hi
        }
    ]
})

上面引用了一个Hi页面，在components文件夹下创建一个Hi.vue

<template>
    <div>
        <h2>{{message}}</h2>
    </div>
</template>
<script>
export default {
    name:'hi',
    data(){
        return{
            message:'I am Hi page'
        }
    }
    
}
</script>
<style scoped>

</style>

那现在就可以通过/hi路径来访问我们的Hi页面啦

 

那么那么修改路径是不是很麻烦呢，我们怎么来创建一个导航呢。

App.vue也算是程序的一个入口吧，它的代码是这样的：

其中router-link就是路由的链接，制作成导航；

<router-view/>就是路由显示的地方

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/">首页</router-link>
      <router-link to="/hi">hi页面</router-link>
    </div>
    <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>