路由笔记

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

###2.编程式导航
通过Vue提供api方法来完成导航跳转的功能
//跳转到/users 路由
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 } ]} ] })