vue --- > Vue中的路由跳转问题

import Vue from 'vue'
import Router from 'vue-router'    // 前2个导入时vue框架自带的
import SayHi from '@/components/SayHi'   // 这个导入是自己写的位于components下的sayHi

Vue.use(Router)  // 用到了vue的Router模块
export default new Router({
    routes: [
        {
            path: '/say_hi',     // 在浏览器中输入@/#/say_hi
            name: 'SayHi',   // 给处理这条路由的js文件起名为SayHi,一般就是浏览器中输入的驼峰命名法命名的
            component: SayHi   // 处理该路由的组件,在上面导入的
        },
    ]
})
path: 定义链接地址, 如/#/say_hi
name: 表示为这个路由加名字, 方便以后引用, 如this.$route.push({name:'SayHi'})
component: 表示该路由由哪个component来处理.

// 跳转到某个路由时带上参数  --- > 普通的参数
routes: [
    {
        path: '/blog',
        name: 'Blog'
    }
]
// 在视图中,我们这样做:
<router-link :to="{name: 'Blog', query:{id:3} }">User</router-link>
// 用户点击这个代码生成的 html 页面时, 就会触发跳转.

// 在<script />中,我们这样做:
this.$router.push({name: 'Blog', query: {id: 3}})

// 上面两个都会跳到/#/blog?id=3

// 跳到某个路由时带上参数 --- > 在路由中声明的参数
routes: [
    {
        path: '/blog/:id',
        name: 'Blog'
    },
]

// 在视图中,我们这样做:
<router-link :to="{name: 'Blog', params: {id: 3} }">User</router-link>

// 在script中,我们这样做:
this.$router.push({name: 'Blog', params: {id: 3}})
// 上面两个都会跳转到/#/blog/3    ps:与上面块(/#/blog?id=3)的区别

// 根据路由获取参数
--- > 对于 /#/blogs?id=3 中的参数,可以这样获取
this.$route.query.id  // 返回结果3



--- > 对于 /#/blogs/3 这样的参数,可以对应的路由是:
routes: [
    {
        path: '/blog/:id',    // 注意此处的id
        ...
    }
]
可以采取以下的代码来获取id
this.$route.params.id   // 返回结果3

参考《Vue.js快速入门》 P92~P94

vue --- > Vue中的路由跳转问题

猜你喜欢