今日励志语:有恒则断无不成之事
今日知识点:vue-router-动态路由
概念:不同的路由地址,需要指向同一个组件,这样的路由规则的实现,就叫动态路由。
换一句话:你定义的路由规则,需要匹配到不同的地址。
业务场景:
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 文章列表组件配置对象
const List = {
template:`<div>
<h1>文章列表</h1>
<router-link to="/article/101">文章1</router-link>
<router-link to="/article/102">文章2</router-link>
<router-link to="/article/103">文章3</router-link>
</div>`
}
// 文章详情组件配置对象
const Article = {
// $route 是vue实例上的数据对象,和data中数据的使用时一样的
// $route.params 获取路径传参的(动态路由传参的)这是一个对象
// $route.params 对象中的数据:键 根据path中的参数名称 值 地址栏上的参数数据了
template: `<div><h1>文章详情</h1> {{$route.params.articleId}}</div>`
}
// 路由规则
const routes = [
{path: '/', component: List},
{path: '/article/:articleId', component: Article}
]
// 初始化
const router = new VueRouter({ routes })
const vm = new Vue({
el: '#app',
// 挂载
router
})
</script>
</body>
</html>
总结:
规则 {path: ‘/article/:articleId’, component: Article}
参数 $route.params.articleId
今日面试题:新增声明命令 let 和 const
在 es6 中通常用 let 和 const 来声明,let 表示变量、const 表示常量。
特点:
let 和 const 都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使
用。
不存在变量提升,只能先声明再使用,否则会报错。在代码块内,在声明变量之
前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
在同一个代码块内,不允许重复声明。
const 声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对
象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不
能改变,而变量成员是可以修改的。)