1.VueRouter基本概念
Vue-Router是 Vue.js官方的路由插件,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
Vue比较适合单页面的项目,所有的网页的内容都是通过一个Html页面进行切换。在这个Html页面中通过不同的路由来控制不同组件的显示,这个控制就需要Vue-Router来完成。
Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射(对应联系)起来,访问不同的路径就显示不同的组件。
典型单页面运用
所有内容都在一个Html页面显示,每个标题都是一个组件,点击后在不同组件中进行内容切换,显示不同内容。
Vue-Router目前有两个版本。3.X版本 和 4.X 版本
Vue-Router的安装
Vue-Router3.X 版本 : npm install vue-router@3
Vue-Router4.X 版本 : npm install vue-router@4
官方文档: https://router.vuejs.org/zh/
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'import VueRouter from 'vue-router'
Vue.use(VueRouter)
2.实例演示:
将刚刚创建的项目 vuerouter-demo 拖入 Visual Studio Code 中。目前项目中还没有 Vue-Router 需要进行安装。
注意:本例由于使用的是Vue2,所以要安装vue-router3
在Visual Studio Code 中终端中输入如下命令:
npm install vue-router@3
安装完成后在 package.json 中及可以看到 vue-router3
下面模拟网易音乐的界面,在项目components文件夹中自定义Discover.vue、Friends.vue、My.vue三个组件,并用Vue-Router来控制它们像是与切换。
Discover.vue:
发现音乐
Friends.vue
关注
My.vue
我的音乐
三个组件都需要链接对应关系,这就需要用Vue-Router来描述。
可以使用
我们在根组件 App.vue 中进行路由的跳转,代码如下:
发现音乐
关注
我的音乐
这时App组件上就有三个按钮,有兴趣可以用CSS进行样式美化。这个时候可以点击但是还无法跳转。因为定义的链接和三个组件的对应关系还没有设置。应为对应关系比较复杂,可以放到单独的 js 文件中写。
在项目 src 中创建一个 router 文件夹,在里面新建一个名为 index.js 路由模块,在里面定义对应关系,代码如下:
//导入Vue和VueRouter
import VueRouter from "vue-router";
import Vue from "vue";
//导入组件
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
//将VueRouter设置为vue的插件
Vue.use(VueRouter)
const router = new VueRouter({
//指定hash属性与组件的对应关系
routes:[
{path:'/discover',component:Discover},
{path:'/friends',component:Friends},
{path:'/my',component:My},
]
})
path对应链接;comment对应组件。
此时,组件要显示到哪里去?这就需要站位标签
一旦用户点击了“发现音乐”,浏览器就会跳转的 discover 。根据前面路由的定义discover 对应的是 Discover 组件。这时Discover 组件的内容就会被渲染到
下面需要在 index.js 中将路由导出,代码如下:
export default router
最后在main.js 中导入并设置,代码如下:
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
运行 npm run serve 启动项目。
我们发现没有显示下面的视图,点击“发现音乐”等,链接才会切换,这就可以显示出来了。
第一次加载是到首页,如果这个时候加载组件就没有内容显示,这样也不合适。实际项目中会指定一个默认加载的组件。如网易云音乐中,进入首页默认是进入“发现音乐”组件。
3.vue-router进阶
用户在访问地址A的时候,强制用户跳转到地址B,从而显示特定组件的页面。
通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向。
例如将首页重定义为显示“发现音乐”组件
{path:'/',redirect:"/discover"},
可以在组件下再嵌套组件,比如在“发现音乐”下再嵌套“推荐”、“歌单”等子路由。
在Discover.vue组件中,声明 toplist 和 playlist 的子路由链接以及子路由占位符,代码如下:
发现音乐
推荐
歌单
这个时候就需要新建 Toplist 和 Playlist 两个组件。
然后在 index.js 中引入Toplist 和 Playlist 两个组件,然后通过 children 属性嵌套声明子路由的方式来设置对应关系。这时index.js 完整代码如下:
//导入Vue和VueRouter
import VueRouter from "vue-router";
import Vue from "vue";
//导入组件
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
import Toplist from '../components/Toplist.vue'
import Playlist from '../components/Playlist.vue'
//将VueRouter设置为vue的插件
Vue.use(VueRouter)
const router = new VueRouter({
//指定hash属性与组件的对应关系
routes:[
//当用户访问 / 时,调转到 /discover
{path:'/',redirect:"/discover"},
{path:'/discover',
component:Discover,
//通过 children 属性,可以嵌套声明子路由
children:[
{path:"toplist",component:Toplist},
{path:"playlist",component:Playlist},
]
},
{path:'/friends',component:Friends},
{path:'/my',component:My},
]
})
//导出默认路由
export default router
很多路由链接,如下:
商品1
商品2
商品3
const router = new VueRouter({
//指定hash属性与组件的对应关系
routes:[
{path:"prodect/1",component:Prodect},
{path:"prodect/2",component:Prodect},
{path:"prodect/3",component:Prodect},
]
},
{path:'/friends',component:Friends},
{path:'/my',component:My},
]
})
上述方式复用性非常差。
思考:如有一个商品列表,当用户点商品的时候就跳转到该商品的详情,每一个商品都会有商品详情,不可能给每一个商品写一个商品详情的组件。这时就希望跳转到详情组件的时候重用组件里面的东西。
动态路由:就是把Hash地址中可变的部分定义为参数项,从而提高路由规则的复用性。在 vue-router 中使用英文的冒号 ( : )来定义路由参数项,如下:
{path : '/prodect/:id,component:Prodect'}
下面进行实例演示:
1.有商品就需要先建一个商品组件:Prodect.vue
2.假设商品组件是基于 My.vue 组件的子路由,修改 My.vue 组件,如下:
我的音乐
商品1
商品2
商品3
3.在 index.js 中设置对应关系,先导入 Prodect.vue 组件
import Prodect from '../components/Prodect.vue'
4.使用 children 属性定义跳转,代码如下:
{path:'/my',
component:My,
children:[
{path:":id",component:Prodect},
]
},
5.启动项目,在浏览器中就可以显示效果:点击“我的音乐”,然后在显示的商品1/2/3 中任点 一个,都可以显示“商品”这个内容出来。
现在有一个问题,在跳转到 Prodect.vue 组件时,如何知道需要显示商品几的详情呢?
解决方法:
方法1:通过动态路由匹配的方式渲染出来的组件中,可以使用 $route.params 对象访问到动态匹配的参数项,比如在商品详情组件的内部,根据 id 值,请求不同的商品数据。修改代码如下:
这时,点击不同的商品就显示出是商品几的详情
方法2:为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参,index.js 中修改示例代码如下:
{path:":id",component:Prodect,props:true},
Prodect.vue 组件修改如下:首先定义一个参数 id ;然后就不需要 $route.params,可以直接用于 id 来传递参数了,浏览器显示效果同上。
商品{{ id }}
声明式导航:
编程式导航:router.push(...)
除了使用
想要导航到不同的 URL ,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录。所以,当用户点击浏览器“后退”按钮时,则回到之前的 URL 。
当点击
推荐
导航守卫可以控制路由的访问权限
比如还没有登录就想跳转到订单页面,这时可以用路由守卫进行统一控制。
全局导航守卫会拦截每个路由规则,从而对每个路由进行访问权限控制。可以使用 router.beforeEach 注册一个全局前置守卫:
router.beforeEach(( to,from,next )=>{
if ( to.path === '/main' && !isAuthenticated){
next( '/login' )
}
else{
next()
}
})
to:即将进入目标
from:当前导航正要离开的路由
在守卫方法中,如果声明了 next 形参,则必须调佣 next()函数,否则不允许用户访问任何一个路由
直接放行:next()
强制停留在当前页面:next(false)
强制跳转到登录页面:next( '/login' )
页面更新:2024-03-20
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号