- 列表进入详情页的传参问题
- 路由懒加载(也叫延迟加载)
列表进入详情页的传参问题
关联知识点 ——路由跳转的方式
声明式的跳转:
// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>
编程式的跳转:
//跳转到上一次浏览的页面
this.$router.go(-1)
//指定跳转的地址,我们自己设置的路由地址
this.$router.replace('/pathname')
//指定跳转路由的名字下,pathname是我们自身为路由设置的名字
this.$router.replace({name:"pathname"})
//通过push进行跳转,我们自己设置的路由地址或者我们自己设置的名字
this.$router.push('/pathname')
this.$router.push({name:'pathname'})
this.$router.push({ path: '/pathname/${id}'}) //id为参数
传参的方式:query、params+动态路由传参
两者的区别:
-
query通过
path
切换路由,params通过name
切换路由// query通过path切换路由 <router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link> // params通过name切换路由 <router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>
-
query通过
this.$route.query
来接收参数,params通过this.$route.params
来接收参数。// query通过this.$route.query接收参数 created () { const id = this.$route.query.id; } // params通过this.$route.params来接收参数 created () { const id = this.$route.params.id; }
-
query传参的url展现方式:
/detail?id=1&user=123&identity=1&更多参数
params+动态路由的url方式:/detail/123
-
params动态路由传参,一定要在路由中定义参数,然后在路由跳转的时候必须要加上参数,否则就是空白页面,而query传参则不用:
对应的路由配置:
{ path: '/detail/:id', name: 'Detail', component: Detail },
注意,params传参时,如果没有在路由中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的,因为你总不可能要求用户不能刷新页面吧。 例如:
// 定义的路由中,只定义一个id参数 { path: 'detail/:id', name: 'Detail', components: Detail } // template中的路由传参, // 传了一个id参数和一个token参数 // id是在路由中已经定义的参数,而token没有定义 <router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link> // 在详情页接收 created () { // 以下都可以正常获取到 // 但是页面刷新后,id依然可以获取,而token此时就不存在了 const id = this.$route.params.id; const token = this.$route.params.token; }
参考:
路由懒加载(也叫延迟加载)
路由懒加载可以帮我们在进入首屏时不用加载过度的资源,从而减少首屏加载速度。在路由文件中,
非懒加载写法:
import Index from '@/page/index/index';
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
}
]
})
路由懒加载写法:
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: resolve => require(['@/view/index/index'], resolve)
}
]
})