vue2中路由使用教程

一、承接上回

由于前后端分离开发，自然就会有路由需要是使用，于是乎在被坑了一天后就有了这篇文章。

二、大致总结如下

① 安装 npm install vue-router

②引入 main.js中引入

		        import Vue from "vue"
	
		        import App from "./../src/views/App"
	
		        import Router from "./router"
	
		        import axios from "axios"
	
		        import iView from "iview"
	
		        import "iview/dist/styles/iview.css"
	
		        import "babel-polyfill"
	
		        Vue.use(iView);
	
		        Vue.use(Router)
	
		        Vue.config.productionTip = false
	
		        Vue.prototype.$axios = axios
	
		        new Vue({
	
		            el: "#app",
	
		            router:Router,
	
		            components: { App },
	
		            template: "<App/>"
	
		        })

③router下的index.js中配置如下

			        import Vue from "vue"
		
			        import Router from "vue-router"
		
			        import HelloWorld from "@/components/HelloWorld"
		
			        import Right from "@/components/right/Right"
		
			        import ArticleDetail from "../views/articleDetail/ArticleDetail"
		
			        import Index from "../views/index/Index"
		
			        Vue.use(Router)
		
			        export default new Router({
		
			            routes: [
		
			             {
		
			                path:"/ArticleDetail",
		
			                name:"ArticleDetail",
		
			                component:ArticleDetail
		
			             },
		
			            {
		
			                path:"/Index",
		
			                name:"Index",
		
			                component:Index
		
			            }
		
			         ]
		
			        })

④挂接router-view（可以理解为定义一个组件，后续的路由操作就渲染在这里了）--直接在App.vue中写入下面内容

			        <!-- 挂接路由 -->
		
			        <router-view></router-view>

⑤路由操作

			        that.$router.push({
		
			            path: "/ArticleDetail",
		
			            query: {
		
			                articleId: vId
		
			            }
		
			        });

更多精彩请关注guangmuhua.com