第一种最简单的路由跳转
router-view 实现路由内容的地方，引入组件时写到需要引入的地方
需要注意的是，使用vue-router控制路由则必须router-view作为容器。
router-link to=’需要跳转到的页面的路径
浏览器在解析时，将它解析成一个类似于a的标签。
别忘记给需要跳转的路径在需要提前在router/index.js下引入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import GoodsList from '@/components/GoodsList' import GoodsDetail from '@/components/GoodsDetail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/GoodsList', name: 'GoodsList', component: GoodsList }, { path: '/GoodsDetail', name: 'GoodsDetail', component: GoodsDetail } ] }) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template> <div class="goods-list"> <h1>商品列表</h1> <router-link to="GoodsDetail">第一种最简单的路由跳转 </router-link> </div> </template> <script> export default { name: 'GoodsList', data () { return { } }, methods: { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> |
第二种this.$router.push()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template> <div class="goods-list"> <button @click="change">按钮</button> </div> </template> <script> export default { name: 'GoodsList', data () { return { id:1, name:'xiaoming', age:27 } }, methods: { change(){ this.$router.push({ //核心语句 path:'/GoodsDetail', //跳转的路径 query:{ //路由传参时push和query搭配使用 ，作用时传递参数 id:this.id , name:this.name, age:this.age } }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> |
第三种this.$router.replace()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<template> <div class="goods-list"> <button @click="change">商品列表</button> </div> </template> <script> export default { name: 'GoodsList', data () { return { id:1, name:'xiaoming', age:27 } }, methods: { change(){ this.$router.replace({ //核心语句 path:'/GoodsDetail' , //跳转的路径 }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> |
