北京网站建设怎么样天,网站如何做下一页,建筑网官网查询,专业做家居的网站VueRouter的简介
VueRouter是官方的路由插件#xff0c;适合单页面应用/网页的切换。VueRouter目前有3.x版本和4.x版本#xff0c;3.x版本只能结合vue2使用#xff0c;4.x版本只能结合vue3使用。安装#xff1a;npm install vue-router3
目的
初始版本#xff1a;我们想…VueRouter的简介
VueRouter是官方的路由插件适合单页面应用/网页的切换。VueRouter目前有3.x版本和4.x版本3.x版本只能结合vue2使用4.x版本只能结合vue3使用。安装npm install vue-router3
目的
初始版本我们想实现的效果为有三个组件Discover.vue、Friends.vue、My.vue通过vuerouter来切换并管理。
进阶版本我们想实现的效果为有五个组件Discover.vue、Friends.vue、My.vue、TopList.vue、PlayList.vue其中TopList.vue、PlayList.vue是Discover.vue下的子组件。同时My页面根据不同的id值可以请求到不同的商品数据。
初始版本的代码
Discover.vue
templatedivh1发现音乐/h1/div
/templateFriends.vue
templatedivh1关注/h1/div
/templateMy.vue
templatedivh1我的音乐/h1/div
/template新建router目录在目录下新建index.js
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.vueVue.use(VueRouter)const router new VueRouter({routes: [// 当用户访问/时跳转到/discover{ path: /, redirect: /discover },{ path: /, redirect: /discover , component: Discover},{ path: /discover/friends, component: Friends },{ path: /discover/my, component: My},]
})export default routermain.js
import Vue from vue
import App from ./App.vue
import router from ./router
// 如果router目录下是index.js那么可以省略如果是其他名字
//譬如是a.js那么就要写import router from ./router/a.jsVue.config.productionTip falsenew Vue({render: h h(App),router// 原本的写法是router: router但是因为名称一致所以可以省略
}).$mount(#app)
App.vue
templatediv idapp!-- 声明路由链接 --router-link to/discover发现音乐/router-linkrouter-link to/my我的音乐/router-linkrouter-link to/friends关注/router-link!-- 声明路由占位标签 --router-view/router-view/div
/template进阶版本的代码动态路由
Discover.vue
templatedivh1发现音乐/h1router-link to/discover/toplist推荐/router-linkrouter-link to/discover/playlist歌单/router-linkhrrouter-view/router-view/div
/templateFriends.vue
templatedivh1关注/h1/div
/templateMy.vue
templatedivh1我的音乐/h1router-link to/my/1商品1/router-linkrouter-link to/my/2商品2/router-linkrouter-link to/my/3商品3/router-linkrouter-view/router-view/div
/templatePlayList.vue
templateh3歌单/h3
/templateProduct.vue
templateh3商品{{ id }}/h3
/templatescript
export default {props: [id]
}/scriptTopList.vue
templateh3推荐/h3
/templateindex.js
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
import Product from /components/Product.vueVue.use(VueRouter)const router new VueRouter({routes: [{ path: /, redirect: /discover },{path: /discover,component: Discover,children: [{ path: toplist, component: TopList },{ path: playlist, component: PlayList },]},// { path: /discover/toplist, component: TopList },// { path: /discover/playlist, component: PlayList },{ path: /friends, component: Friends },{path: /my,component: My,children: [{ path: :id, component: Product, props: true }]},]
})export default routerApp.vue和main.js不变
导航守卫
全局导航守卫会拦截每个路由规则有点类似后端的全局拦截器。 我们可以使用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’)
