[学习笔记]Vue路由安装与使用

结合个人视频学习、友人指导意见与实际情况，做下总结~
1、安装vue-router（在终端内项目文件夹下执行）

npm install vue-router --save-dev

安装成功后在终端重启下项目：npm run dev

2、在main.js下进行相关配置
（1）将vueRouter和所需要的组件（Home.vue，HelloWorld.vue）导入一下；

import Vue from 'vue'
import VueRouter from 'vue-router'	//导入路由
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

（2）声明要使用路由

Vue.use(VueRouter)	 //声明使用路由模块

（3）配置路由

const router = new VueRouter({
 routes:[
  {path:"/",component:Home},
  {path:"/helloworld",component:HelloWorld},
 ],
 mode:"history" //去掉url中的符号“#”
})

（4）在实例化的vue对象中使用router，如:

new Vue({
 router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

（5）在主组件(App.vue)中展示路由模块

<template>
  <div id="app">
    <!--导航栏-->
    <ul>
    <!--使用路由跳转不用a标签，不会发生页面加载-->
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/helloworld">HelloWorld</router-link></li>
   </ul>
    <router-view></router-view>	//展示路由模块
  </div>
</template>

3、使用router

在地址栏(url)后输入helloworld，会跳转至HelloWorld.vue