简要介绍

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

语法：router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router访问路由实例。因此你可以调用this.$router.push。

声明式编程式

< router-link :to="…">	router.push(…)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push(’/login’)
// 对象
router.push({ path: ‘/login’ })
// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

示例：在注册后，立刻导航到登录

<div id="app"><router-link to="/login">登录</router-link><router-link to="/register">注册</router-link><hr><router-view></router-view> </div> <template id="login-form"><form action="">用户名: <input type="text" name="username" > <br>密码: <input type="password" name="pwd"> <br><input type="submit" value="登录"></form> </template> <template id="register-form"><form action="" @submit.prevent="handleRegister">用户名: <input type="text" name="username" > <br>密码: <input type="password" name="pwd1"> <br>确认密码: <input type="password" name="pwd2" > <br><input type="submit" value="注册"></form> </template><script>const loginForm = {template:"#login-form"}const registerForm = {template:"#register-form",methods:{handleRegister(){alert("添加成功");this.$router.push({path:"/login"})}}}var router = new VueRouter({routes:[{name:"default",path:"/",redirect:"/login"},{name:"login",//路由名称path:"/login",//路由路径component:loginForm//要路由到的组件},{name:"register",path:"/register",component:registerForm}]});const vm = new Vue({el:"#app",components:{loginForm,registerForm},//router:router //如果路由变量名也叫router，则可以省略:routerrouter})</script>

实战案例

登录和注册切换

案例代码：

<div id="app"><router-view></router-view> </div> <template id="login-form"><form action="" @submit.prevent="handleLogin">用户名: <input type="text" > <br>密码: <input type="password"> <br><input type="submit" value="登录"><router-link to="/register">注册</router-link></form> </template> <template id="register-form"><form action="" @submit.prevent="handleRegister">用户名: <input type="text" > <br>密码: <input type="password" > <br>确认密码: <input type="password" > <br><input type="submit" value="注册"> <router-link to="/login">登录</router-link></form> </template> <script>const loginForm = {template:"#login-form",methods:{handleLogin(){alert("登录成功");location.href="https://www.baidu.com";}}};const registerForm = {template:"#register-form",methods:{handleRegister(){alert("注册成功");this.$router.push("/login");}}};const router = new VueRouter({routes:[{path:"/",redirect:"/login"},{path:"/login",component:loginForm},{path:"/register",component:registerForm}]});const vm = new Vue({el:"#app",router}) </script>

增删改查的切换

案例效果：

示例代码：

<div id="app" ><div ><router-link to="/book/show"><button >查询</button></router-link><router-link to="/book/add"><button >添加</button></router-link><hr><router-view></router-view></div> </div> <template id="my-table"><table border="1"><thead><tr><th>id</th><th>name</th><th>price</th><th>stock</th><th>operation</th></tr></thead><tbody><tr v-for="b in books" :key="b.id"><td>{{b.id}}</td><td>{{b.name}}</td><td>{{b.price}}</td><td>{{b.stock}}</td><td><button>删除</button><router-link :to="{path:'/book/update',query:{id:b.id}}"><button>更新</button></router-link></td></tr></tbody></table> </template> <template id="add-form"><form action="">name: <input type="text" name="" id=""> <br>price: <input type="number" name="" id=""> <br>stock: <input type="number" name="" id=""> <br><input type="submit" value="添加"></form> </template> <template id="update-form"><form action=""><input type="hidden" name="">name: <input type="text" name="" id=""> <br>price: <input type="number" name="" id=""> <br>stock: <input type="number" name="" id=""> <br><input type="submit" value="更新"></form> </template> <script>const addForm = {template:"#add-form" }const updateForm = {template:"#update-form"};const myTable = {template:"#my-table",data(){return {books:[{id:1,name:"十万个为什么",price:100000.0,stock:1},{id:2,name:"vue从入门到放弃",price:19800.0,stock:2}]}}}const router = new VueRouter({routes:[{path:"/book/show",component:myTable},{path:"/book/add",component:addForm},{path:"/book/update",component:updateForm},{name:"book",path:"/book/:id",component:updateForm}]});const vm = new Vue({el:"#app",router}) </script>

总结

以上是生活随笔为你收集整理的Vue第二部分(5)：编程式的路由导航和实战案例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。