router是什么意思路由器router中文含义

文章插图
router是什么意思路由原理

传统开发方式 url改变后立刻发起请求，响应整个页面，渲染整个页面
SPA 锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据
页面不跳转用户体验更好

SPA

single page application(单页应用程序)
前端路由
锚点值监视
ajax获取动态数据
核心点是锚点值
前端框架 Vue/angular/react都很适合开发单页应用

基本使用

vue-router
其是vue的核心插件
1:下载 npm i vue-router -S
1.5(重要):安装插件Vue.use(VueRouter);
2:在main.js中引入vue-router对象 import VueRouter form ‘./x.js’;
3:创建路由对象 var router = new VueRouter();
4:配置路由规则 router.addRoutes([路由对象]);
路由对象{path:’锚点值’,component:要(填坑)显示的组件}
5:将配置好的路由对象交给Vue
在options中传递-> key叫做 router
6:留坑(使用组件) <router-view></router-view>

router-link

to<router-link to=”/xxx/x”>点我</router-link>
帮助我们生成a标签的href
锚点值代码维护不方便，如果需要改变锚点值名称
则需要改变 [使用次数 + 1（配置规则）] 个地方的代码

命名路由

1:给路由对象一个名称 { name:’home’,path:’/home’,component:Home}
2:在router-link的to属性中描述这个规则
<router-link :to=”{name:’home’}></router-link>”
通过名称找路由对象，获取其path，生成自己的href
大大降低维护成本，锚点值改变只用在main.js中改变path属性即可

参数router-link,

Vue.prototype.xxx = {add:fn}
所有组件中，使用this.xxx就能拿到这个对象
查询字符串
1:配置:to=”{name:’detail’,query:{id:hero.id} }”
2:规则 {name:’detail’,path:’/detail’,component:Detail}
3:获取 this.$route.query.id
4:生成 <a href=https://www.520longzhigu.com/shenghuo/”/detail?id=1″>
path方式
4:生成 <a href=https://www.520longzhigu.com/shenghuo/”/detail/1″>
1:配置 :to=”{name:’detail’,params:{id:hero.id} }”
2:规则 { name:’detail’,path:’/detail/:id’}
3:获取 this.$route.params.id
查询字符串配置参数
router-link一次
获取的时候一次
path方式配置参数
router-link一次
规则配置的时候声明位置
获取的时候一次
总结书写代码注意事项
path方式需要在路由规则中声明位置

别名
/a的别名是/b，意味着当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。
{ path: ‘/a’, component: A, alias: ‘/b’ }
重定向
// 方式一：字符串路径path
{ path: ‘/a’, redirect: ‘/b’ }
// 方式二：name
{ path: ‘/a’, redirect: {name: ‘b’} }
// 方式三：动态返回重定向目标
{ path: ‘/a’, redirect: to => {
// 方法接收目标路由作为参数；return 重定向的字符串路径/路径对象
}}
阶段总结

vue-router使用步骤 : 1:引入 2:安装插件 3:创建路由实例 4:配置路由规则 5:将路由对象关联vue 6:留坑
router-link to=”/xxx” 命名路由
在路由规则对象中加入name属性
在router-link中 :to=”{ name:”xxx’} “
$route 路由信息对象,只读对象
$router 路由操作对象,只写对象
下图来自vue-router源码

Vue.use(插件对象); // 过程中会注册一些全局组件,及给vm或者组件对象挂在属性
以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

router是什么意思 路由器router中文含义

router是什么意思路由器router中文含义