vue-router的安装与使用

vue-router安装

1. 使用vue脚手架创建项目，在是否使用路由器时选择yes，等待项目安装完毕
2. 在项目的src根目录中新增了一个文件夹，叫做router，在router文件夹中有一个index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

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

3. 在index.js文件中可以得知，在使用路由器之前必须首先导入vue、vue-router，并且导入要使用的组件，之后使用Vue.use(Router)来使用路由器
4. 将路由器的具体配置导出，使用关键字export default来导出。同时在new Router中使用routes数组，该数组的作用是将url与组件建立连接，在浏览器地址栏中输入相应的url，就会调用相对应的组件
5. 其中path默认为’/’，代表调用组件时的url名称；component代表调用的组件名称

vue-router的使用

1. 修改index.js文件，自己创建路由器，对页面进行相应的修改
2. router-link标签的作用是进行跳转，与a标签类似，在router-link中的to属性代表要跳转的url
3. router-view标签的作用是显示由路由注册的组件
   index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home'
import About from '../components/about'

Vue.use(Router)

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

export default new Router({
  routes
})

home.vue

<template>
  <div>
    <h2>这是首页标题</h2>
    <p>这是首页内容1111</p>
    <p>这是首页内容2222</p>
  </div>
</template>

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

<style scoped>

</style>

about.vue

<template>
  <div>
    <h2>这是关于标题</h2>
    <p>这是关于内容1111</p>
    <p>这是关于内容2222</p>
  </div>
</template>

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

<style scoped>

</style>

app.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style></style>