vue路由跳转有加载页面
路由器的设置和使用可能会让一些新手感到困惑，本文vue路由跳转有加载页面将为您提供简单易懂的路由器指南和使用技巧。
本文内容目录一览：
- 1、vue-router路由切换数据加载中效果是怎么实现的
- 2、vue路由，二级路由及跳转
- 3、Vue路由的页面跳转打开新页面
- 4、vue.js怎么用路由跳转页面
- 5、vue路由通过url方式跳转到其他页面导致数据加载问题
- 6、vue路由跳转页面的几种方式及其区别
vue-router路由切换数据加载中效果是怎么实现的
一个方案就是利用 vue-router 导航钩子 导航钩子 · GitBook ，步骤如下：
1. 可以在vuex 或者 bus 中维护一个isLoading 的变量
2. 在 router.beforeEach 钩子中 设置 isLoading = true , 在 router.afterEach 中 设置 isLoading = false
3. 在根组件（即router-view所在的父组件）上 放置一个伍闭歼Loading组件，例如：
Loading :isLoading="态袭isLoading"/Loading
router-view /router-view
这个 Loading组件根据这个isLoading值来决定是否显示loading动画腔冲。
vue路由，二级路由及跳转
★router文件下的index.js文件：
/* 导入Vue构造函数 */
import Vue from 'vue'
/* 导入路由VueRouter构造函数 */
import VueRouter from 'vue-router'
/* 导入HomeView页面 */
import HomeView from '../views/HomeView.vue'
//调用构造函数Vue的use方法 传入VueRouter构造函数
//作用是把VueRouter作为一个插薯缓裤件 全局插入到Vue中
Vue.use(VueRouter)
/* 定义一个路由数组对象 */
const routes = [
/* 一个对象就对应了一个路由
path就是路由的地址
name给路由起的名字
component 具体跳转的页面
*/
{
/* path: '/' 根页面,表示已进入就显示的页面 */
path: '/',
name: 'home',
/* 这种方式一进入页面就会全部加载,不是用到的数简时候再加载
性能没有懒加载的方式好 */
component: HomeView,
/* 可以使用redirect 重定向 已进入主页就展示第一个子页面哪物
redirect 后面跟的是路径名 并不是name */
/* 因为/是根路径 所有可以直接写one */
redirect:'one',
children:[{
path:'one',
name:'one',
component: () = import('../views/OneView.vue')
}]
},
{
/* 这里是一级目录所以可以加/ 表示根目录 */
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
/* 懒加载功能 : 一开始不加载,当你切换路由的时候再加载 */
component: () = import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
/* about不是根路径 所以redirect后面要写全 '/about/aboutchild', */
redirect:'/about/aboutchild',
children:[{
path:'aboutchild',
name:'aboutchild',
component: () = import('../views/AboutChild.vue')
}]
},
{
path:'/ChildA',
name:'ChildA',
component: () = import('../components/ChildA.vue')
},
{
/* path:'*' 必须要放最后 */
/* path:'*' 表示上面的路由没有匹配到 则进入下面的页面 */
path:'*',
name:'notfound',
component: () = import('../components/NotFound.vue')
}
]
/* 实例化构造函数 VueRouter 产生一个实例化对象
并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter*/
const router = new VueRouter({
routes
})
/* 把实例化路由对象 router默认导出 */
export default router
main.js文件：
/* 导入Vue构造函数 */
import Vue from 'vue'
/* 导入App.vue入口页面 */
import App from './App.vue'
/* 导入router文件夹中的index.js中的router实例化对象 */
/* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router */
import router from './router'
/* 生产提示 */
/* 改成false是用来关闭开发者提示 */
Vue.config.productionTip = false
/* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')
都是用来挂载到id为#app的div上的*/
/* 把路由实例化对象router配置在Vue中,作用是保证项目中
所有的vue文件都可以使用router路由的属性和方法 */
new Vue({
router,
/* 会把所有vue文件渲染到App组件上 */
render: h = h(App)
}).$mount('#app')/* 等同于 el:"#app" */
viwes文件下：
App.vue文件：
template
div id="app"
nav
!-- router-link 组件是负责跳转的 to属性是用来写跳转路径的
router-link组件本质上是有a标签来实现的 路由跳转的原理是根据
锚点来的 --
router-link to="/"Home/router-link |
router-link to="/about"About/router-link |
router-link to="/ChildA"点我跳转ChildA/router-link |
router-link to="/ChildB"点我跳转ChildB/router-link |
/nav
!-- router-view 组件是用来展示组件的容器 --
router-view/
!-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转
组件显示在 router-view 容器中 --
/div
/template
style
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
/* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */
nav a.router-link-exact-active {
color: #42b983;
}
/style
AboutView.vue文件：
template
div class="about"
h1This is an about page/h1
!-- to后面写的是路径 --
!-- router-link to="/about/aboutchild"我是aboutchild/router-link --
!-- to 后面要加: 作用是把后面解析成一个对象而不是字符串 --
router-link :to="{name:'aboutchild'}"我是aboutchild/router-link
!-- 二级路由显示的容器 --
router-view/router-view
/div
/template
AboutChild.vue文件：
template
div
h1AboutChild/h1
/div
/template
script
export default {
}
/script
style
/style
HomeView.vue文件：
template
div class="home"
h1KW47冲冲冲/h1
router-link to="/one"ONEview/router-link
!-- 二级路由对应的组件容器 --
router-view/router-view
/div
/template
script
// @ is an alias to /src
export default {
name: 'HomeView',
components: {
}
}
/script
OneView.vue文件：
template
div
h1我是ONEVIwe/h1
/div
/template
script
export default {
}
/script
style
/style
components文件下：
ChildA.vue文件：
template
div
h1我是CHildA/h1
/div
/template
script
export default {
}
/script
style
/style
ChildB.vue文件：
template
div
h1我是ChildB/h1
/div
/template
script
export default {
}
/script
style
/style
NotFound.vue文件:
template
div
h1我是notfound/h1
/div
/template
script
export default {
}
/script
style
/style
左边文件目录：
Vue路由的页面跳转打开新页面
效果与a标签的target=_blank是一样的，只不过不用点击，直接打开
1、在router.js里新加一个路由
{
path: '/previewFile',
name: 'previewFile',
meta: {
title: '预览文件',
hideInMenu: true
运拍 },
component: () = import('@/view/audits/coms/previewFile.vue')
},
2、在需要跳转的逻辑方法里加,这里必须用query，否则参数获取不到，差悄返亲测有效
const { href } = this.$router.resolve({
path: `/previewFile`,
虚饥 query:{url:res.data.Url}
});
window.open(href, '_blank');
3、跳转页获取参数：let url=this.$route.query.url;
vue.js怎么用路由跳转页面
vue.js路由使用方法：vue1.0的方法
html
a href="#" v-link="{path:'/login'}"登陆/a
router-view/router-view//内容显示的
script
//1、准备一个根组件
var App = Vue.extend();
//2、准蚂中亩备组件
var Login = Vue.extend({
template:{h3登陆页面/h3}
});
//3、准备路由闷森
var router = new vueRouter();
//4、关联组件和路径
router.map({
'login':{
component:Login //组件名称
}
});
//5、启动路由
router.start(App,'#box');
//6、默认跳转页面（不是必须）
router.redirect({'/':'培陆login'});
/script
/html
vue路由通过url方式跳转到其他页面导致数据加载问题
当通过URL方式跳转到其他页面时，Vue会重新加载整个页面并初始化数据，这可能导致之前已经加载的数据被清空。为了避免这种问题，可以考虑使用Vue Router提供枝睁的路由导航守卫（Navigation Guards）来管理路由跳转。
在路由中定义全局和局部的导航守卫，以确保在路由切换时可以保存和恢复组件的状态和数据，例如：
1. 全局导航守卫
在router/index.js中设置前置守卫beforeEach，用于拦截路由跳转，需要在next()中调用next()或next(false)才能进行跳转。
```
router.beforeEach((to, from, next) = {
// 在此处可以对路由进行权限控制等操作
next()
})
```
2. 组件内的局部导猛丛岁航守卫
在组件中通过beforeRouteLeave钩子函数，可以在离开当郑滚前路由之前执行一些操作，比如保存当前组件的状态和数据。
```
export default {
data() {
return {
msg: 'Hello World'
}
},
beforeRouteLeave(to, from, next) {
// 在此处可以将当前组件的状态和数据保存到Vuex或local storage中
next()
}
}
```
使用导航守卫可以很好地解决路由跳转造成的数据丢失问题，同时也可以实现更细粒度的路由控制和管理。
vue路由跳转页面的几种方式及其区别
场景：A页面跳转到B页面并携带参数
1.1不带参数：
1.2带参数：
2.1不带参握携洞数：
2.2 query传参
2.3 params传参
2.4 直接通过path传参
2.5 传递对象(obj不能过长否则会报错)
2.6 params和query的区别
用法同上： this.$router.push()
向前或者向后跳转n个页面，n可为正整数或负整数
1. this.$router.push
跳转到指定url路径，并在history栈中添加一个记段枯录，隐搭点击后退会返回到上一个页面
3. this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
1. query 可以用 name 和 path 匹配路由，通过 this.$route.query.id 获取参数，刷新浏览器参数不会丢失
2. params 只能用 name 匹配路由，通过 path 匹配路由获取不到参数，对应的路由配置 path:'/home/:id' 或者 path:'home:id' ，否则刷新浏览器参数丢失
3.直接通过url传参， push({path: '/home/123'}) 或者 push('/home/123') ，对应的路由配置 path:'/home/:id' ，刷新浏览器参数不会丢失
通过本文所介绍的路由器技巧，你可以更好地掌握网络，解决上网问题。
