vue router 判断无效路由_Vue-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-link

• to点我

• 帮助我们生成a标签的href

• 锚点值代码维护不方便，如果需要改变锚点值名称

• 则需要改变 [使用次数 + 1(配置规则)] 个地方的代码

命名路由

• 1:给路由对象一个名称 { name:'home',path:'/home',component:Home}

• 2:在router-link的to属性中描述这个规则

• 通过名称找路由对象，获取其path，生成自己的href

• 大大降低维护成本，锚点