router是什么意思

路由器是什么意思？路由原则

在传统的开发模式中，url改变后，它会立即发起请求，响应整个页面，并呈现整个页面

spa锚值更改后，不会启动请求，会启动品牌ax请求在本地更改页面数据

如果页面不跳转，用户体验会更好

矿泉

单页应用(单页应用)

前端路由

锚值监控

使用品牌ax获取动态数据

核心点是锚值

前端框架vue/angular/react都适合开发单页应用

基本用途

vue路由器

它是vue的核心插件

1:npm i vue-router -s

1.5(重要):安装插件vue . use(vuerouter)；

2:“导入vue-router表单”。/x.js "转换成main.js

3:创建路由对象var router=new vuerouter；

4:配置路由规则路由器。添加路由([路由对象])；

路由对象{路径： "锚点值"，要显示的组件：组件(坑填充)}

5:将配置的路由对象提供给vue

在选项中传递的-key称为路由器

6: pit预留(使用组件)路由器-视图/路由器-视图

路由器链接

要将路由器链接到="/xxx/x "，请单击我/路由器链接

帮助我们生成a标签的href

锚值代码维护不方便。如果需要更改锚数值名称，

需要更改[使用次数1(配置规则)]位置的代码

命名路线

1:为路由对象命名{name:" home "，path:"/home "，component: home}

2:在路由器链接的to属性中描述了此规则

router-link : to=" { name : " home " }/router-link "

通过名称查找路由对象，获取其路径，并生成自己的href

大大降低了维护成本，只需在main.js中改变路径属性就可以改变锚值

参数路由器-链路，

vue.prototype.xxx={add:fn}

在所有组件中，这个对象可以通过使用this.xxx获得

查询字符串

1:将：配置为="{name :" detail "，查询： {id :hero。id}} "

2:规则{名称： "详细信息"，路径： "/详细信息"，组件：详细信息}

3:拿着这个。$route.query.id

生成a href="/detail？id=1

路径模式

4:生成

1:将：配置为="{name:" detail "，params: { id3360hero。id}} "

2:规则{名称： "详细信息"，路径： "/详细信息/: id"}

3:拿着这个。$route.params.id

查询字符串配置参数

路由器链接一次

一旦你得到它

路径模式配置参数

路由器链接一次

配置规则时声明位置

一旦你得到它

总结编写代码的注意事项

路径模式需要在路由规则中声明位置

另一个名字

/a的别名是/b，这意味着当用户访问/b时，url将保持为/b，但路由匹配是/a，就像用户访问/a一样。

{ path: "/a "，component: a，alias: "/b" }

再直接的

//模式1:字符串路径路径

{ path: "/a "，redirect: "/b" }

//方法2:名称

{ path: "/a "，redirect: {name: "b"} }

//方法3:动态返回重定向目标

{ path: "/a "，重定向：到={

//方法接收目标路由作为参数；返回重定向的字符串路径/路径对象

}}

阶段总结

vue-router使用step : 1:引入2:安装插件：创建路由实例4:配置路由规则53360将路由对象与vue 6:关联留坑。

路由器-链接到="/xxx "命名路由

将名称属性添加到路由规则对象中

在路由器-链接：到="{name :" xxx"} "

$route路由信息对象，只读对象

$router路由操作对象，只写入对象

下图来自vue-router源代码

vue.use(插件对象)；//一些全局组件将在进程中注册，虚拟机或组件对象将挂在属性中

装载虚拟机和组件对象的方法是：对象。定义属性(vue。原型，" $ router "，{

get: function{返回自己的路由器对象；

}

})

嵌套路由

根据锚点值的变化，只需将上图中的profile改为posts组件，即可使用嵌套布线

代码思想

路由器视图的第一层包含路由器视图

1:路由器视图的细分

2:每个坑都挖好了，应该对应一个单独的构件

使用说明： 1:路由器视图包含路由器视图2:路由子路由

路由守卫

它实际上是一个用于路由更改的事件回调函数

全局路由保护

路由器。beforeeach ((to，from，next)={})

路线。在每个((to，from)={})之后

传送专用防护装置

const router=new vuerouter({

routes: [

{

path: "/foo "，

component: foo，

beforeenter: (to，from，next)={

//…

}

}

]

})

大会内部的警卫

1:路由配置

{path:"/xxx/:id"}

2:路由器链接

router-link to="/xxx/1 "

router-link to="/xxx/2 "

const foo={

template: `…`，

beforerouteenter (to，from，next) {

//在渲染之前调用，确认该组件对应的路由

//没有！可以！"获取此组件实例"

//因为在守护执行之前还没有创建组件实例。

//不过，可以这样用

下一步(vm={

//通过“虚拟机”访问组件实例-未来组件

vm.msg="数据在此"；

})

},

before route date(to，from，next) {

//触发条件见下文

//可以访问组件实例this "

},

beforerouteleave前进(到，从，下一步){

//在导航离开组件的相应路线时调用

//可以访问组件实例this "

}

}

beforerouteupdate的触发条件(当动态路由参数改变时)

然后

下一个(“/xxx”)

//或者

下一步({name: "路由对象" } "的name属性)；

release next；

取消此导航(url恢复为单击前的url)下一步(false)

再直接的

到| |从

那个。这个对象中的fullpath属性是常用的，它是当前的url

守护元属性的应用

路由元元数据-元是路由规则是否需要验证权限的配置。

与路由对象{ meta: { ischecked: true } }中的名称属性级别相同

路由钩子-权限控制的函数执行时间

每次路由匹配后，在路由器视图之前渲染组件

router.beforeeach(函数(to，from，next) {

//判断到或来自的完整路径

} )

编程导航

1:跳转到指定的锚点并显示页面。$ router.push ({name:" xxx "，query: {id33601}，params 3360 { name 3360 " abc " })；

2:配置规则{名称：" xxx "，路径："/xxx/:名称" }

3:据史书记载。向前还是向后

这个。$ router . go(-1 | 1)；

1代表进一步，1代表后退

过渡效果和缓存

我们需要在路线改变时改变页面，好吗！同时，我们希望添加一些淡入淡出效果，这样就可以使用过渡的内置组件

此外，考虑到缓存问题，结合使用保活组件

你看到的是这个

过渡

点火电极

路由器视图/路由器视图

/保持活力

/过渡

过渡和保持活动状态请参考文档中的第内置组件节了解详细信息

比较后附上实施原则