vue-router的安装与简单使用

1.安装

打开命令行进入到项目文件夹下，运行命令

1. npm install vue-router --save  

等待安装完毕。

2.使用

打开Vue项目下的main.js文件，导入vue-router。

import VueRouter from 'vue-router'

然后用Vue.use()使用路由

Vue.use(VueRouter);

//然后创建VueRouter实例并写配置项
const router = new VueRouter({
	mode:"history",//如果不加这个参数会在路径前出现一个#号 如http://你的网站根目录/#/page1
      routes:[
      {path:'/',component://这里写要加载的组件},
      {path:'/这里写进入的地址',component:这里写要加载的组件}
      {path:'/page1',component:Page1} //这个例子就是进入 http://你的网站根目录/page1 时加载Page1组件。
      ]
});

配置完成以后我们需要在Vue实例中引入它

然后打开App.vue组件，在id为app的div中加入

<router-view></router-view>标签的含义是加载的组件在这里显示

<router-link></router-link>和a标签差不多，但不同的是这个标签不会刷新页面