路由笔记

超、凢脫俗 2023-07-17 06:48 2阅读 0赞

\#\#\#1.命名路由  
就是给路由来取个名字。  
通过给路由规则中的规则对象添加name属性来设置名字

\#\#\#2.编程式导航  
通过Vue提供api方法来完成导航跳转的功能  
//跳转到/users 路由  
vm实例对象. r o u t e r . p u s h ( " / u s e r s " ) ; / / 前 进 （ 参 照 h i s t r o y 对 象 中 的 g o 方 法 ） v m 实 例 对 象 . router.push("/users"); //前进（参照histroy对象中的go方法） vm实例对象. router.push("/users");//前进（参照histroy对象中的go方法）vm实例对象.router.go(1);

\#\#\#3.模块化规范  
浏览器端的模块化规范： AMD CMD  
服务器端的模块化规范： CommonJS  
既能在浏览器端也能在服务器端使用的模块化规范： ES6模块化。  
ES6模块化规范中规定了：  
使用import来导入其他模块(js文件)  
使用export来暴露模块中的成员

\#\#\#4.在NodeJS中如何使用ES6模块化规范进行导入和导出  
A.默认导出的语法：  
//每一个js模块只能出现一个 export default  
export default \{  
需要暴露的成员。。。。  
\}

默认导入的语法：  
import 变量名 from ‘js模块的路径’  
例：  
import test from ‘./test.js’

B.按需导出的语法：  
//使用export关键字修饰需要导出的内容即可，一个模块可以按需导出多个内容  
export let num1 = 100;  
export let name = “jack”;

按需导入的语法：  
import \{ num1 , name \} from “./test.js”;

补充：我们可以同时进行按需导入和默认导入  
import test,\{ num1 , name \} from “./test.js”;

C.直接导入并执行模块中的代码：  
import “js文件的路径”  
例：  
import “test.js”;

\#\#\#5.webpack  
webpack是前端项目构建工具，这个工具可以帮助来创建前端项目(创建出来的项目支持ES6模块化，高级js语法特性，支持less，sass，图片处理，网站优化渲染，兼容性)。  
要求掌握使用webpack创建前端项目。

在webpack.config.js配置文件中，可以通过mode来设置项目是开发阶段还是发布阶段（会将代码进行压缩和混淆）  
module.exports = \{  
mode:“development”,//开发阶段  
//mode:“production”,//发布阶段  
\}  
\#\#\#6.如何设置打包的js入口文件和输出的js结果文件  
打开webpack.config.js文件，尽心入口和出口文件的配置  
const path = require(“path”);

module.exports = \{  
//使用entry来设置需要打包的入口js文件  
entry:"./src/index.js",  
//使用output来设置打包之后的js结果文件  
output:\{  
//设置生成结果文件的路径  
path: path.join(\_\_dirname,"./dist"),  
//文件名称  
filename:“bundle.js”  
\}  
\}

\#\#\#7.配置自动打包的webpack  
安装webpack-dev-server  
修改脚本 scripts:\{ “dev”:“webpack-dev-server” \}  
修改引入js文件的代码：  
最后可以通过 http://localhost:8080/src/index.html 看到效果。

注意：  
webpack-dev-server会将打包生成的最新的js文件放到服务器的根目录下面，而且放在浏览器缓存中。  
在文件路径中是看不见的。  
如果更改webpack的配置文件，必须要重启webpack才能让最新的配置生效( npm run dev )

\#\#\#8.loader加载器  
webpack只能打包js文件，如果想要打包其他的文件（.less,.sass,.jpg），webpack无法正确识别。  
就需要loader加载器来协助webpack打包其他的文件。

1.什么是路由？实现前端路由依靠的是什么？  
所谓的路由就是对应关系，依靠hash值的改变来实现前端路由。

2.如何使用VueRouter实现前端路由?  
A.引入js文件  
B.放置路由链接和路由占位符  
C.创建路由的组件 const One = \{ template:`` \}  
D.创建路由对象，来设置路由规则 const myRouter = new VueRouter(\{ routes:\[ \{ path:"/users" , component: One \} \] \})  
E.将路由对象挂载到vm实例中 const vm = new Vue(\{ el:"\#app", router:myRouter \})

3.如何实现路由重定向？  
在路由规则中通过redirect属性来设置重定向 const myRouter = new VueRouter(\{ routes:\[ \{ path:"/" , redirect:"/users" \} \{ path:"/users" , component: One \} \] \})

4.如何实现嵌套路由？  
通过给路由组件设置子级路由的方式来实现嵌套路由 const OneChildren = \{ template:\`\` \} const One = \{ template:`子级路由` \} //在路由规则中通过children属性来设置子级路由规则 const myRouter = new VueRouter(\{ routes:\[ \{ path:"/" , redirect:"/users" \} \{ path:"/users" , component: One , children:\[ \{ path:"/users/child" , component:OneChildren \} \]\} \] \})

5.如何实现动态路由传参？

通过在路由规则中设置props属性来完成动态路由传参

const Test = { props:[ 'name' ], template:`{
       {name}}
    ` }
     const myRouter = new VueRouter({ routes:[ { path:"/" , redirect:"/users" }, 
     { path:"/test/:name" , component:Test, props:true } 
     { path:"/users" , component: One , children:[
      { path:"/users/child" , component:OneChildren } ]} ] })