vue路由跳转 前端路由与vue-router的基本用法
1.什么是前端路由？
前端路由，即前端维护一个路由规则。有两种实现方式。一种是使用网址的散列，这通常被称为锚点。java通过hashChange事件监控url的变化，IE7需要使用轮询；另一种是html5的History模式，使url看起来像一个普通的网站，除以'/'没有#，但页面不跳转。但是，使用这种模式需要服务器的支持。在收到所有请求后，服务器指向同一个html文件，否则将出现404。所以SPA只有一个html，整个网站的内容都在这个HTML里面，用Java处理。
前端路由有很多优点，比如页面持久化。和大多数音乐网站一样，你可以在同事放歌的时候跳转到其他页面，音乐是不间断的。再比如前后端完全分离。前端路由通常与特定的框架结合使用，如Angular NGO out、React router和vue-router。
二、虚拟路由器的基本用法
1.在项目的根目录下创建一个新的路由器，并安装vue-router
npm i - save vue-router
2.使用入口文件main.js中的Vue.use()加载插件:
从“vue”导入Vue
从“虚拟路由器”导入虚拟路由器
从“”导入应用程序。/app.vue '
3.每个页面对应一个组件，即. vue文件。在路由器目录下创建一个视图目录来存储所有页面，然后在视图中创建两个文件，index.vue和about.vue:
// index.vue
& lt模板>。
& ltdiv>。主页
& lt/template>。
& lt>。
导出默认值{ }
& lt/>。
//about.vue
& lt模板>。
& ltdiv>。简介页
& lt/template>。
& lt>。
导出默认值{ }
& lt/>。
4.返回main.js，完成路由配置
常量路由器= [
{
路径:“/index”，
组件:(解析)= >组件。要求(['。/view/index . vue ']，resolve)
},
{
路径:“/about”，
组件:(解析)= >组件。要求(['。/view/about . vue ']，resolve)
}
]
路由器中每个项目的路径属性指定当前匹配的路径，组件是映射的组件。如前例所述，webpack会将每条路由打包成一个js文件，在请求这个页面时只加载这个页面的js，也就是异步实现的延迟加载(按需加载)。
5.然后在main.js中完成其他路由配置和路由示例
const RouterConfig = {
//使用HTML5的历史模式
模式:“历史”，
路由器:路由器
}
const router = new VueRouter(RouterConfig)
新Vue({
El:“# app”，
路由器:路由器，
渲染:h =>。{
返回h(应用程序)
}
})
6.配置完这些之后，添加一个路由视图
& lt模板>。
& lt路由器-视图>;& lt/router-view>。
& lt/template>。
& lt>。
导出默认值{ }
& lt/>。
当运行网页时，
运行npm运行dev启动服务，然后访问localhost:8080/index和localhost:8080/about访问这两个页面。
在路由列表中，您可以在末尾添加新项目。当访问的路径不存在时，重定向到主页:
常量路由器= [
{
路径:“*”，
重定向:“/index”
}
]
这样，访问localhost:8080就会自动跳转到localhost:8080/index页面。
路由表的路径也可以带参数，比如个人主页的场景，路由一部分是固定的，一部分是动态的:/user/123456，其中id“123456”是动态的，但是路由到同一个页面。在此页面中，希望获得此id，然后请求相关数据。在路由中，可以按如下方式配置参数:
// main.js
常量路由器= [
{
路径:“/user/:id”，
component:(resolve)= > gt。要求(['。/view/user . vue ']，resolve)
},
{
路径:“*”，
重定向:“/index”
}
]
//在路由器/视图目录下，创建一个新的user.vue文件
推荐阅读
- 穿墙路由器 华为新品4G路由器评测：穿墙效果真不差 双宽带加速技术很有料
- 伊甸|《另一个伊甸：超越时空的猫》试玩：跳转时空，拯救未来
- 触手控 华硕八爪鱼AX11000万兆路由测试
- 华硕ac86u 华硕AC86U路由器最佳设置
- 宽带猫和路由器的区别 光猫和路由器的区别
- 无线宝 京东云无线宝是噱头 回本之后二刷千兆路由京东云无线宝至尊版
- R星官网移除《Agent》图标 网址跳转R星主页
- 带猫功能的无线路由器 消费提醒 带无线路由器功能的光猫可以用吗
- 流星群侠传新版本玩“穿越”？出剧情让玩家秒跳转永劫无间地图！
- mw320r 超强信号可穿墙 水星MW320R 无线路由