编程式导航和上面说的声明式导航的区别在于，声明式导航是先写好便签，然后进行导航。
编程式导航通过代码直接进行了导航。
通过this.$router.push()这个方法来实现编程式导航， 当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>hello vue router</h1>
<!--
通过this.$router.push()这个方法来实现编程式导航，
当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转
-->
<h2>声明式导航</h2>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册组件</router-link>
<router-link to="/user/101">用户101</router-link>
<router-link to="/user/102">用户102</router-link>
<router-link to="/emp-select">员工查询</router-link>
<router-link to="/emp-add">员工新增</router-link>
<router-link to="/emp-delete">员工删除</router-link>
<hr>
<h2>编程式导航</h2>
<button @click="doRedirect('login')">登录组件</button>
<button @click="doRedirect('register')">注册组件</button>
<button @click="doRedirect('user')">用户组件</button>
<button @click="doRedirect('emp')">员工组件</button>
<!--
router-view组件
当我们点击router-link之后，会根据路径去找对应的组件，找到对应的组件后，在router-view位置显示
-->
<router-view></router-view>
</div>
<script src="../js/vue.js"></script>
<!-- 先引入vue的核心库，再引入router的核心库 -->
<script src="../js/vue-router.js"></script>
<script>
// 1、定义组件
const Login = {
template:"<div><h1>登录组件</h1></div>"
}
let register = {
template:"<div><h1>注册组件</h1></div>"
}
let User = {
template:"<div><h1>用户组件{{$route.params.id}}</h1></div>",
// 当使用路由参数是，例如：/user/101导航到/user102，想通组件实例将被重复使用，
// 这意味着组件的生命周期钩子不会被调用
// 如果想对路由参数变化做出相应，需要使用watch侦听器
mounted () {
console.log('User mounted');
},
watch: {
/*
侦听当前路由的变化，当路由变化时候，可以做出一些响应*/
'$route'(to, from){
console.log(to,from);
console.log('$route监听了路由变化了');
}
}
}
let NotFount = {
template:'<div><h1>页面没有找到</h1></div>',
}
let Index = {
template:'<div><h1>欢迎使用本系统</h1></div>'
}
let Emp = {
template:'<div><h1>员工组件</h1></div>'
}
let User = {
template:'<div><h1>用户组件</h1></div>'
}
// 2、定义路由列表
/*
在router里面配置每一个路由，每一个路由就是一个对象
path：表示路由路径，字符串，需要以/开头
component:表示路由对应的组件
*/
//路由列表的匹配模式是自上到下逐个匹配，匹配到了就执行
//把带匹配的路径都进行放到后面
let routes = [
{
path:'/login',component:Login
},
{
path:'/register',component:register
},
{
//*表示通配符
path:'/user/:id',component:User
},
{
//*表示通配符
path:'/emp-*',component:Emp
},
{
path:'/',component:Index
},
{
path:'/*',component:NotFount
},
]
//3、创建router实例,当引入Vue.router之后，VueRouter就会成为全局函数
let router = new VueRouter({
//配置路由列表,配置项的名称routes
routes:routes
})
let vm = new Vue({
el : "#app",
data : {
},
//4、将创建号的rouer实例，绑定给vue实例的router属性
router,
methods: {
doRedirect(str) {
//this.$router.push('跳转路径')
this.$router.push('/' + str);
}
}
})
</script>
</body>
</html>
标签：Vue,编程,let,path,组件,router,导航,路由 From： https://www.cnblogs.com/yansunda/p/18382751