安装
- 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>