router路由使用--入门

安装

• cdn直接引入
  npm install vue-router

import Vue from vue

import VueRouter from vue-router

Vue.use(VueRouter)

不建议上面这样引入, 一般创建脚手架的时候引入这个插件;

<router-link to="/foo">Go to Foo</router-link>

<router-view></router-view>

使用

• 路由配置到router/index.js中;
• 改造配置需要使用路由的标签

<ul class="nav">	
		<!-- to的地址和路由里面定义的地址一样 -->
		<!-- tag="li"把这个改为li标签, 默认的是a标签 -->
		<router-link tag="li" to="/">首页</router-link>
		<router-link tag="li" to="/goods">商品</router-link>
		<router-link tag="li" to="/user">用户中心</router-link>
</ul>

• App.vue渲染

<template>
  <div id="app">
	  <!-- 上面是导航 -->
	  <div>
		  <NavBar></NavBar>
	  </div>
	  <!-- 下面是导航的内容 -->
	  <div class="content">
		 
		  <router-view></router-view>
	  </div>
   
  </div>

eg

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 路由要使用这个文件, 就需要导入
import Index from '../views/Index.vue'
import Goods from '../views/Goods.vue'
import User from '../views/User.vue'


Vue.use(VueRouter)

const routes = [
	// 路由的配置文件,Index跟引入的别名对应
	{
		path:'/',
		component:Index,
	},
	{
		path:'/goods',
		component:Goods,
	},
	{
		path:'/user',
		component:User,
	} 
]

const router = new VueRouter({
  routes
})

export default router

NavBar.vue

<template>
	<ul class="nav">	
		<!-- to的地址和路由里面定义的地址一样 -->
		<!-- tag="li"把这个改为li标签, 默认的是a标签 -->
		<router-link tag="li" to="/">首页</router-link>
		<router-link tag="li" to="/goods">商品</router-link>
		<router-link tag="li" to="/user">用户中心</router-link>
	</ul>
</template>

<script>
</script>

<style>
	.nav{
		background-color: #42B983;
		text-align: center;
	}
	.nav li{
		list-style: none;
		display: inline;	
		margin: 20px;
		cursor: pointer;
	}
</style>

App.vue

<template>
  <div id="app">
	  <!-- 上面是导航 -->
	  <div>
		  <NavBar></NavBar>
	  </div>
	  <!-- 下面是导航的内容 -->
	  <div class="content">
		 
		  <router-view></router-view>
	  </div>
   
  </div>
</template>
<script>
	import NavBar from '@/components/NavBar.vue'
    export default{
		components:{
			NavBar
		}
	}
</script>
<style>
	.content{
		width: 80%;
		border: solid 2px #42B983;
		margin: auto;
	}

</style>