-
安装路由
npm install vue-router --save //安装vue-router路由,
2.项目中导入router路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.创建路由
const router = new VueRouter({
routes : {
{path:"/page1",component:ShowPage1},
{path:"/page2",component:ShowPage1},
{path:"/匹配链接路径/:参数",component:对应需要跳转的模块},使用:+参数来传递参数
},
mode : "history" //去掉链接地址处的"#/"
})
4.使用
new Vue({
router : router, //绑定上方创建的路由
})
5.设置显示区域
<router-view></router-view>
6.路由设置链接
<router-link to=''"></router-link> //to属性对应链接地址
// 如果想传递参数的话 需要通过v-bind:to=" '/链接地址/'+传递参数 "
7.向服务端发送请求的方法
1. this.$http.get('/链接地址'+链接id,{传递参数}).then(function(返回参数){
})
如何获取路由里面传递的参数
this.$route.params.传递的参数
Vue-Router 中的 $route 和 $router
$route表示当前路由信息对象
this.$route.path //对应当前路由的路径,解析为绝对路径
this.$route.params.* //一个key/value对象,包含了动态片段和全匹配片段,*为对应传递的路由参数,如果没有路由参数,就是一个空对象。
this.$route.query.* //表示url查询参数
//详细内容可直接控制台打印出来this.$route的值
$router对象,
全局的路由实例,是router构造方法的实例,在vue内部,可以直接通过$router来访问路由实例
需要使用Vue.use(VueRouter) 来进行全局挂载路由实例。
1. `this.$router.push() //等同于<router-linke :to=" ">,跳转到不同的url push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面`
this.$router.push('home') // 字符串
this.$router.push({ path: 'home' })// 对象
this.$router.push({ name: 'user', params: { userId: 123 }})// 命名的路由
this.$router.push({ path: 'register', query: { plan: '123' }})// 带查询参数,变成 /register?plan=123
2. this.$router.go(-1) //页面路由跳转,前进或者后退
3. this.$router.replace('/') //页面替换,不会向history栈添加新的记录。