路由懒加载
- 组件异步加载
- 在需要的时候再加载路由对应的组件
- 可以把组件分组打包 /* webpackChunkName: “about-group” */
{
path: '/about',
name: 'About',// 命名路由
// component: 在路由匹配的时候,执行这里的函数加载对应的组件
component: () => import(/* webpackChunkName: "about-group" */ '../views/About.vue')
}
命名路由
- 在 routes 配置中给某个路由设置name
{// 一个路由配置
path: '/',// 路由路径
name: 'Home',// 命名路由
component: Home// 当地址栏访问地址为 '/'时,在router-view中使用组件Home
}
<router-link :to="{name: 'Home'}">Box</router-link>
命名视图
- 给
<router-view name="a">
标签设置name属性 - 在同一个路由地址,渲染多个组件,多个视图
{
path: '/user',
name: 'User',
components: {// 命名视图的配置
default: ()=> import('../views/User.vue'),
login: ()=> import('../views/Login.vue')
}
}
<router-view name="login"></router-view>
动态路由
{
path: '/user/:userId',// 动态路由,路由地址为:/user/可变数据
name: 'Box',
component: () => import(/* webpackChunkName: "box" */ '../views/User.vue')
},
设置404页面
{// 配置以上路由都不匹配时,渲染404组件
path: '*',// 匹配所有路径
name: 'notfound',
component: () => import('../views/404.vue')
},
重定向
- 从 /a 重定向到 /b,url会改变
{// 一个路由配置
path: '/index',// 路由路径
redirect: '/'// 重定向,当访问地址为/index时,重定向到path: '/'
},
别名
- 路由地址 /a 别名为 /b,当用户访问/b时,url不会变,实际匹配/a
{// 一个路由配置
path: '/',// 路由路径
name: 'Home',// 命名路由
alias: '/home',// 别名
component: Home// 当地址栏访问地址为 '/'或'/home'时,在router-view中使用组件Home
},
路由模式
- 哈希模式 url中带有# (默认)
- history模式 url中没有#
- 在创建路由对象的配置项中设置模式
mode: ‘hash’,// 哈希模式(默认)
mode: ‘history’,// history模式
声明式导航和编程式导航
百度 -> 声明式导航
window.location.href = “www.baidu.com” -> 编程式导航
Home -> 声明式导航
通过路由对象的api进行导航切换 -> 编程式导航
this.
r
o
u
t
e
r
.
p
u
s
h
(
)
访
问
的
记
录
被
添
加
到
h
i
s
t
o
r
y
栈
t
h
i
s
.
router.push() 访问的记录被添加到history栈 this.
router.push()访问的记录被添加到history栈this.router.replace() 访问的记录不被添加到history栈
this.$router.go(-1) 跳转到指定的某天历史记录
路由参数
this. r o u t e r 是 路 由 操 作 对 象 , 用 于 操 作 路 由 t h i s . router是路由操作对象,用于操作路由 this. router是路由操作对象,用于操作路由this.route是路由信息对象,用于获取路由信息
- 路由传参
- this.$router.push(’/details?goodsId=’+code) 类似get
- this.$router.push({
path: ‘/details’,
query: {
id: 3
}
}) - this.$router.push({
name: ‘Details’,
params: {
id: 2
}
}) - 通过动态路由传参
{
path: '/details/:id',// 动态路由
name: 'Details',
props: true,// 动态路由的参数可以在Details组件中通过props接收
component: () => import(/* webpackChunkName: "box" */ '../views/Details.vue')
},
this.$router.push('/details/'+goodsId) 传参
this.$route.params.id 接收参数
-
注意:路由传参时 path和query组合使用,name和params组合使用
-
this.$router.push({path:’/’,query:{}}) 类似get,数据出现在url
-
this.$router.push({name:’/’,params:{}}) 类似post,数据不出现在url
-
接收路由参数
- this.$route.query
- this.$route.params
- 通过props接收
嵌套路由
- 子路由(二级路由)
- /box/child
{
path: '/box',
name: 'Box',
component: () => import(/* webpackChunkName: "box" */ '../views/Box.vue'),
children: [// 子路由配置
{
path: 'child',// 访问地址为 /box/child 进入子路由,子路由的path不要加/
name: 'Child',
component: () => import(/* webpackChunkName: "box" */ '../views/Child.vue'),
children: []
}
]
},
rem自适应
% 相对父元素
em 相对父元素的字体大小
rem root+em root->html -> font-size: 20px; 1rem = 20px
vw viewport width 视口宽度 100vw 100%
<script>
function setHtmlFontSize(){
let designWidth = 750;//设计稿宽度 html font-size: 100px
let deviceWidth = document.documentElement.clientWidth;// 设备宽度
document.documentElement.style.fontSize = deviceWidth/designWidth*100+'px';
}
setHtmlFontSize();
window.onresize = function (){
setHtmlFontSize();
}
</script>