每日进步一点点

纵有千般好

于 2021-04-22 17:24:31 发布

阅读量57

点赞数

分类专栏：每日进步一点点

本文链接：https://blog.csdn.net/weixin_48292956/article/details/116022397

版权

每日进步一点点专栏收录该内容

23 篇文章 0 订阅

订阅专栏

今日励志语：有恒则断无不成之事

今日知识点：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 的是一个对
象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不
能改变，而变量成员是可以修改的。）

纵有千般好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日进步一点点

今日励志语：有恒则断无不成之事今日知识点：vue-router-动态路由概念：不同的路由地址，需要指向同一个组件，这样的路由规则的实现，就叫动态路由。换一句话：你定义的路由规则，需要匹配到不同的地址。业务场景：代码演示：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录