声明式路由
<router-link to=""></router-link>
- eg
<router-link tag="li" to="/">首页</router-link>
编程式导航(编程式路由)
适用于进入详情页等
router.push(...)
- eg
this.$router.push('/goods/detail')
eg
- goods.vue
<template>
<ul>
<li @click="getGdoos(goods.id)" v-for="goods,index in goodsList" :key="index">
{{goods.name}}
</li>
</ul>
</template>
<script>
export default{
data:function(){
return {
goodsList:[
{id:1,name:'小明'},
{id:2,name:'小花'},
{id:3,name:'小红'}
]
}
},
methods:{
getGdoos:function(id)
{
console.log(id)
// 详情页跳转是编程式路由,push后面是跳转路径
this.$router.push('/goods/detail')
}
}
}
</script>
<style>
</style>
- 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'
import Detail from '../views/goods/Detail.vue'
Vue.use(VueRouter)
const routes = [
// 路由的配置文件,Index跟引入的别名对应
{
path:'/',
component:Index,
},
{
path:'/goods',
component:Goods,
},
{
path:'/goods/detail',
component:Detail,
},
{
path:'/user',
component:User,
}
]
const router = new VueRouter({
routes
})
export default router