vue-router之子路由和路由传参(前端网备份)

先来路由的3种写法

第二种是路由懒加载的写法
还有一点:是我遇到的若是你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误实际上是打包时候路径配置有点问题修改下就行了
找到build下面的webpack.prod.conf.js 添加 publicPath:"./",
具体看这一篇
http://www.javashuo.com/article/p-svtcljsl-t.htmlhtml

//router的3种写法
import Home from '@/components/Home/home'
const routers = [
    {
        path: '/',
        name: 'HelloWorld',
        component: () => import('@/components/HelloWorld')
    },
    {
        path: '/home',
        name: 'Home',
        component: (resolve) => { require(['@/components/Home/home'], resolve) }
    },
    {
        path: '/list',
        name: 'List',
        component: Home
    },
]
export default routers
View Code

主页home.vue(用的iview里面得Menu @on-select="turnToPage")vue

<MenuItem name="/1">
                            <Icon type="ios-navigate"></Icon>
                            Item 1
                        </MenuItem>
  <div>
                <router-view></router-view>
            </div>
View Code
turnToPage (route) {
            this.$router.push(route);
        }

router.js
import te from "@/views/main/index.vue"
{
path: '/',
meta: {
title: 'home'
},
component: () => import('@/components/home.vue'),
children: [{
path: '1',
component: te,
name:'r1',
children: [
{
path: '3/:id/:state',
name:'r2-4',
component: () =>import('@/views/test2/3.vue')
}
]
}],
}
index.vue(路由传参点击页)webpack

<router-link :to="{ name:'r2-4',params: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>
<div>
<router-view></router-view>
</div>
3.vue(路由传参接收页)
{{this.$route.params}} 能够打印出多项参数ios

//{ "id": "123", "state": "试试" }web

总结:

1>子路由的显示结果相似于在页面中嵌套iframe的表现形式;
2>路由传参有2种方式:
2-1>params;//相似post传参,就是上面例子中的
而后在浏览器地址上的显现形式是http://localhost:8080/#/1/3/123/试试
须要注意3点:
1)跳转的时候<router-link :to="{ name:'r2-4',params: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>的params;params必需要有name
2)router.js里面path: '3/:id/:state';
3)输出页面里面{{this.$route.params}}
2-2>query;//相似get传参,经过URL传递参数
而后在浏览器地址上的显现形式是http://localhost:8080/#/1/3?id=123&state=试试
须要注意2点:
1)跳转的时候<router-link :to="{ name:'r2-4',query: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>的query
2)router.js里面path: '3',不须要跟参数
3)输出页面里面{{this.$route.query}}
3>路由跳转时候的2种写法
3-1>声明式的导航就是<router-link :to="...">,如上面例子所写
须要注意的是无论query仍是params必需要有name都必须有name
3-2>编程式的导航形式就是router.push(...)
须要注意的是:
1)跳转的时候
this.$router.push({path:route,query:{id:1,state:'试试'}});
params必需要有name,而query不须要name
this.$router.push({path:route,name:'r2-4',params:{id:1,state:'试试'}});
2)router.js里面path: '3',2种都不须要跟参数
3)输出页面里面{{this.$route.query}}{{this.$route.params}}编程

后续重点补充之query与params的实用区别

(并非上面总结的区别,虽然上面用法没错)

首先params仍是上面的用法,主要是用name来找,query的用法宽松,因此就有了如下的用法,
最重要的区别就是若是知道具体地方,用name去找的这种就用params传参,若是只知道是子路由,并不清楚是子路由里面哪个的时候,就用query而后用path:来找路径
router.js浏览器

 {
        path: '/',
        meta: {
            title: 'home'
        },
        component: () => import('@/components/home.vue'),
        children: [{
                path: '1',
                component: te,
                name:'r1',
                children: [{
                    path: 'te',
                    name:'r2-1',
                    component: () =>import('@/views/test2/2.vue')
                    },
                    {
                        path: '2',
                        name:'r2-2',
                        component: () =>import('@/views/test2/4.vue')
                    },
                    {
                        path: '2-1',
                        name:'r2-3',
                        component: () =>import('@/views/test2/3-1.vue')
                    },
                    {
                        path: ':username',
                        component: () =>import('@/views/test2/3-2.vue')
                    },
View Code

index.vueiview

<router-link :to="{ path:'1/user',query: { id: 123,state:'试试'}}" ><MenuItem name="">2</MenuItem></router-link>

3-2.vue
{{this.$route.params}}{{this.$route.query}}
打印出来的就是{ "username": "user" }{ "id": "123", "state": "试试" }ide

相关文章
相关标签/搜索