VueRouter 路由使用

一 安裝對應版本的VueRouter

二在main.js做相關操作   

import Vue from 'vue'
import App from './App.vue'
//引入路由配置文件
import router from './router/index.js'
Vue.config.productionTip = false
//引入實例對象
new Vue({
	el:"#app",
  render: h => h(App),
  router
})

三在index.js 配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import AllThings from '../components/AllThings'
import Hot from '../components/Hot'
import Sport from '../components/Sport'
Vue.use(VueRouter)
const routes=[
	{
		path:'/AllThings',
		component:AllThings,
	},{
		path:'/Hot',
		component:Hot,
	},{
		path:'/sport',
		component:Sport,
	}
]
export default  new VueRouter({
	routes
})

四在app頁面使用

<template>
  <div id="app">
	 
	  <router-link to="/AllThings"> <span class="layui-btn">綜合</span></router-link>
      <router-link to="/Hot"> <span class="layui-btn">熱門</span></router-link>
	  <router-link to="/sport"> <span class="layui-btn">體育</span></router-link>
  <div class="layui-container">
	    <router-view></router-view>
  </div>
  </div>
</template>