###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 } ]} ] })