Vue学习-1（6）使用VueRouter(对比reactRouter...待续)

1. 添加routes数组，并在views里新建vue组件

• 快捷引入

• webstorm支持快捷import

• VSC装插件autoinport/tsimport(不装好像部分也有自动引入)

• 快捷加分号

• ts要求加分号，可以用reformat自动加分号

  codestyle/typescript
  

  

2. main.js中引入router

//1 红线用format快捷键加分号
//2 create项目的时候有选router，main.js中已经自动引入好了
//3 js潜规则引入目录，自动取目录下index或main

• App.vue添加router-view

• App.vue添加导航栏组件

==补充

监听hashchange,通过switch分支去修改Vnode的内容
//引入命名规范(vue、react)
组件引入大写，方法、工具引入小写
	vue(use/install)也大写

• 路由守卫

• 全局守卫

• 对象方法（增强）写法

方法写法：
func_1: (props)=>{},
func_(){},

• vue、react懒加载

• vue-routes属性、方法

path、component、redirect、meta.title、children属性；
beforeEnter、afterEnter钩子
//new router
//routes,mode,linkactiveclass
//link标签
//to,activeclass,tag,XXX

• vue的路由嵌套（!exp! 子路由"/"完整路径）

• react-routes属性、方法

path、component、render、routes、exact属性；
render值--函数式组件
//route标签
//
//navlink标签
//to,exact,activestyle,activeclassname

• react的路由嵌套（!exp! 子路由""层级路径，route标签嵌套）