路由---router
传统的项目怎么切换跳转页面?
1.新建很多的html文件
2.使用 标签的方式进行跳转（a标签） 或者使用js的方式进行跳转（window.location.href ）
传统的项目称之为 多页面项目
路由基本概念
根据url的不同来渲染不同的组件页面
SPA -- 单页面应用 在用户切换页面的时候 没有那种传统页面的白屏问题 提高了用户的体验
路由基本创建
vue-cl自动创建
在创建脚手架的时候 选择自定义 再选择Router 即可
在创建完项目之后 会在src中多了两个文件夹
router ---》 当前文件夹就是配置路由的文件夹
views ---》 当前文件夹就是来写路由页面组件的
带有路由的空项目怎么办？
1.删除components里面的helloword.vue 与views里面的home.vue about.vue文件
2.views下新建你所需要的组件页面
3.需要 配置路由规则 去router下的index.js中配置
(3-1)引用你所想要的页面 到index.js下 import from
(3-2) 在index.js的数组对象中 进行规则的配置
// 引用vue
import Vue from 'vue'
// 引用vue的路由功能模块
import VueRouter from 'vue-router'
// 引用你要配置的路由页面
// @ 只要在路径中出现 无论是在那个层级 只要写@就指向src
import Home from "@/views/home.vue"
import Jingxi from "@/views/jingxi.vue"
import Phone from "@/views/phone.vue"
import Shop from "@/views/shop.vue"
import User from "@/views/user.vue"
// 在vue中 使用 vue路由
Vue.use(VueRouter)
// 配置路由规则的地方
const routes = [
// 配置路由规则
{
path: '/home', //url的路径
name: 'home',//给这个规则起个名字
component: Home //根据上后面的path路径 所渲染的组件页面
},
{
path: '/jingxi', //url的路径
name: 'jingxi',//给这个规则起个名字
component: Jingxi //根据上后面的path路径 所渲染的组件页面
},
{
path: '/phone', //url的路径
name: 'phone',//给这个规则起个名字
component: Phone //根据上后面的path路径 所渲染的组件页面
},
{
path: '/user', //url的路径
name: 'user',//给这个规则起个名字
component: User //根据上后面的path路径 所渲染的组件页面
},
{
path: '/shop', //url的路径
name: 'shop',//给这个规则起个名字
component: Shop //根据上后面的path路径 所渲染的组件页面
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
手动创建
路由导航
标签方式----声明式导航
使用 router-link这个标签来完成页面的跳转 其中有个to属性就是 你要去哪里的路径
<template> <div class="bar"> <!-- 声明式导航 --> <router-link to="/home">首页 </router-link> <router-link to="/jingxi">惊喜 </router-link> <router-link to="/phone">手机 </router-link> <router-link to="/shop">购物 </router-link> <router-link to="/user">我的 </router-link> </div> </template>
声明式导航选中样式类
每当我们选中那个声明式导航之后 vue会自动给这个导航添加一个router-link-active的类名 那么我们就可以根据这个动态的类名添加样式
js的方式--- 编程式导航
1.跳转 this.$router.push("/去哪里的路径")
2.替换 this.$router.replace("/替换的路径")
fun(){
this.$router.push("/home")
}
3.前进与后退 this.$router.go() 正数 前进 负数 后退
404页面
就是当路径没有匹配页面的时候 需要给用户一个错误页面的提示
// 404页面是一个错误提示页面 我们必须把路由规则配置放在最后
{
path: '*',
name: 'Err',
component: Err
},
路由规则也是由优先级的 配置越靠前 优先级越高
重定向--redirect
重(重新)定(定位)向(方向路径)
{path:"/",redirect:"/home"},
在用户第一次进入的时候 我们需要把用户的路径重新定位到 首页
(为什么需要重定向,因为刚进去页面的url地址http://localhost:8080/,用户是不会手动的在地址栏中跳换页面的,所以需要重定向)
在路由规则中进行重定向的设置
const routes=[
{
path:'/home',
name:'Home',
component:Home
},
{
path:'/shop',
name:'Shop',
component:Shop
},
{
path:'/user',
name:'User',
component:User
},
//重定向 /默认路径
{path:"/",redirect:"/home"},
//404页面是一个错误提示页面 我们必须把路由规则配置放在最后
{
path:'*',
name:'Err',
component:Err
}
]路由出口
router-view 来设置路由出口 就是根据路由的规则 显示规则所匹配的路由组件页面 显示的位置
多级路由/嵌套路由
在应用开发的过程中通常会出现在一个页面中嵌套另外一个局部页面进行局部跳转的时候
(可以理解为页面的局部跳转)
1.新建二级路由页面
2.在router下的index.js中先引用二级路由
3.配置二级路由的规则
(3-1)要配置规则先要确定规则写在哪 二级路由的规则写在一级路由的规则内,使用children来标识
path可以是 /二级路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'
import Err from '../views/err.vue'
// 二级路由
import Era from "@/views/er/era.vue"
import Erc from "@/views/er/erc.vue"
import Erd from "@/views/er/erd.vue"
Vue.use(VueRouter)
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/shop',
name: 'Shop',
component: Shop
},
{
path: '/user',
name: 'User',
component: User,
// 设置二级路由
children:[
{
path: '/era',
name: 'era',
component:Era
},
{
path: '/erc',
name: 'erc',
component:Erc
},
{
path: '/erd',
name: 'erd',
component:Erd
},
]
},
// 重定向 /默认路径
{path:"/",redirect:"/home"},
// 404页面是一个错误提示页面 我们必须把路由规则配置放在最后
{
path: '*',
name: 'Err',
component: Err
}
// {
// 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/About.vue')
// }
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
path也可以是 不带/
path也可以是 不带/
path也可以是 不带/
path也可以是 不带/
path也可以是 不带/
{
path: '/user',
name: 'User',
component: User,
// 设置二级路由
// path不带/
children:[
{
path: 'era', // path不带/
name: 'era',
component:Era
},
{
path: 'erc', // path不带/
name: 'erc',
component:Erc
},
{
path: 'erd', // path不带/
name: 'erd',
component:Erd
},
]
},4.设置二级路由的路由出口 在对应的一级路由页面中进行设置 使用router-view
4.设置二级路由的路由出口 在对应的一级路由页面中进行设置 使用router-view
4.设置二级路由的路由出口 在对应的一级路由页面中进行设置 使用router-view
4.设置二级路由的路由出口 在对应的一级路由页面中进行设置 使用router-view
4.设置二级路由的路由出口 在对应的一级路由页面中进行设置 使用router-view
4.设置二级路由的路由出口 在对应的一级路由页面中进行设置 使用router-view
<div> <router-view></router-view> user </div>
5.设置二级路由的导航
方式1 在设置二级路由规则的时候 path带/来设置的时候 二级路由的路径是 /二级路由
<div> <router-link to="/era">era</router-link> <router-link to="/erc">erc</router-link> <router-link to="/erd">erd</router-link> </div>
方式2 在设置二级路由规则的时候 path不不不不不不不不不不不不不不带/来设置的时候
二级路由的路径是 /一级路由/二级路由
<router-link to="/user/era">era</router-link> <router-link to="/user/erc">erc</router-link> <router-link to="/user/erd">erd</router-link>
路由传参/动态路由匹配
在vue中需要把数据从一个页面传递到另外一个页面的时候
方式
params方式
1.在需要接收数据的路由规则中设置接收参数
{
path: '/shop/:xiaoming',//设置接收参数
name: 'Shop',
component: Shop
},2.发送
声明式
<router-link :to="{name:'你要去的路由的name',params:{设置的接收参数:'传递的数据'}}"></router-link>
<template>
<div>
home
<!-- <router-link :to="{name:'你要去的路由的name',params:{设置的接收参数:'传递的数据'}}">点我把数据使用声明式方式传递到shop中</router-link> -->
<router-link :to="{name:'Shop',params:{xiaoming:'呵呵我是传递的额数据'}}">点我把数据使用声明式方式传递到shop中</router-link>
</div>
</template>编程式
methods:{
fun(){
this.$router.push({name:'Shop',params:{xiaoming:'1111呵呵我是传递的额数据'}})
}
}3.接收
直接使用this.$route.params.xxxx
<div>
shop----{{this.$route.params.xiaoming}}
</div>
query方式
1.发送
语法:
<!-- query传参可以使用name 或者 path -->
<router-link :to="{name:'Shop',query:{xiaoming:'我是数据'}}">点我声明式传参query</router-link>
<router-link :to="{path:'/shop',query:{xiaoming:'我是数据'}}">点我声明式传参query2222</router-link>2.接收
this.$route.query.xxxx
query和params的区别
语法上区别:
query方式传参分为两步 发送数据的时候可以使用name还可以使用path来进行 接收的时候使用this.$route.query.xxxxxx
params 传参需要三步 并且在发送数据的时候只能是name 接收的时候使用this.$route.params.xxxx
url展示上 params在url上面只展示数据 相对来说传参安全一点 queryurl 有key还有val 相对来说不安全
$router与$route区别
$router对象： 是vue路由的对象 他是路由实例 他是一个路由全局对象 包含了与路由相关的关键属性
$route对象 : 是跳转到指定路由的局部对象 一个路由页面就有一个$route对象
路由模式
在vue中路由模式 使用mode来进行指定
1.hash模式 默认模式 你不写就是默认模式
2.history模式
| 区别 | hash | history |
|---|---|---|
| url展示 | url带# | url不带# |
| 浏览器兼容性 | 兼容性好 | html5新特性所以对ie兼容性不好 |
| 浏览器刷新 | 刷新之后正常显示 | 上线之后刷新页面丢失 |
路由守卫
node项目
扩展---懒加载
路由懒加载 路由页面按需加载
因为在传统的vue项目中,如果使用了路由可能会出现 首页白屏问题 也会造成很大的性能问题
1.import导入
component:()=>import("你要显示路由的页面路径")
2.异步组件
component:(resolve)=>require(['你要显示路由的页面路径即可'],resolve),
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
