编程式导航详解,也可以叫编程式路由

声明式路由

<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