58做网站联系电话,wordpress去除评论,海口仿站定制模板建站,找不到WordPress目录 路由作用Vue Router路由Vue Router路由的组成VueRouter常用的函数Vue Router的使用安装Vue Router创建router引入router使用 备注 Vue多级路由#xff08;嵌套路由#xff09;编写组件配置嵌套路由 Vue中的动态路由代码示例父组件Home.vue子组件路由配置 路由的 query 参… 目录 路由作用Vue Router路由Vue Router路由的组成VueRouter常用的函数Vue Router的使用安装Vue Router创建router引入router使用 备注 Vue多级路由嵌套路由编写组件配置嵌套路由 Vue中的动态路由代码示例父组件Home.vue子组件路由配置 路由的 query 参数父组件Home.vue改变news.vue组件取参方式改变路由配置 命名路由组件配置父组件传对象参数/Home.vue 路由的 props 配置代码示例动态路由配置父组件Home.vue子组件message.vue router-link的 replace 属性编程式路由导航缓存路由组件新的生命周期钩子activated 和 deactivatedVue2中的路由守卫全局守卫组件级守卫路由守卫的使用方法 Vue2中路由器的两种工作模式哈希模式hash mode特点 历史模式history mode特点 路由
在Vue中路由是指用来管理应用程序中不同页面之间切换和导航的机制。它允许我们根据不同的URL路径动态地加载和显示不同的组件内容。
Vue中的路由可以通过Vue Router来实现。Vue Router是Vue官方提供的一个插件它提供了一种声明式的方式来定义路由和导航。
作用
通过路由我们可以在Vue应用中实现以下功能 跳转到不同的页面通过定义路由配置我们可以指定不同URL路径对应的组件当用户访问这些路径时路由会自动加载并显示对应的组件。 传递参数我们可以在路由路径中定义动态参数例如/user/:id然后在组件中可以通过$route对象来获取URL中的参数。 嵌套路由可以定义嵌套的路由配置实现页面的层级结构。 导航守卫可以在路由切换前后执行一些操作例如验证用户登录状态、获取数据等。
总之通过路由我们可以实现在Vue应用中的页面导航和切换并能够动态加载不同的组件内容。这样可以实现更好的用户体验使得应用程序更加灵活和可扩展。
Vue Router路由
路由就是根据一个请求路径选中一个组件进行渲染的决策过程。Vue Router是Vue.js官方提供的路由管理插件用于实现前端路由。Vue Router通过使用路由插件将不同的组件映射到不同的URL路径上使得我们可以更方便地在Vue应用中进行页面导航和切换。 route表示单个路由。routes表示多个路由的集合。是一个数组在这个数组中包含了多个route。router译为路由器是route、routes的管理者。路由的查找过程是 router -- routes -- route当用户在页面上点击按钮的时候这个时候router就会去routes中去查找route就是说路由器会去路由集合中找对应的路由
Vue Router路由的组成
Vue Router路由由以下几个重要的组成部分组成 路由实例Router Instance创建一个Vue Router实例用于管理应用程序的路由。 路由映射表Route Mapping在路由实例中设置路由映射表即定义URL路径与对应的组件之间的关系。路由映射表是一个包含路由对象的数组每个路由对象由以下几个属性组成 path定义URL路径可以是字符串或者正则表达式。name路由名称用于标识路由。component对应的组件当路径匹配时将渲染该组件。redirect重定向路径在访问某个路径时自动重定向到其他路径。children定义嵌套路由。 路由出口Router View使用 router-view 标签作为路由的出口用于渲染匹配到的组件。 路由链接Router Link使用 router-link 标签作为路由的链接用于生成可点击的链接通过点击链接切换路由。 导航守卫Navigation GuardsVue Router提供了多个导航守卫钩子用于在路由导航过程中拦截或者影响导航行为。例如beforeEach、beforeResolve、afterEach等。
通过以上组成部分我们可以在Vue应用中实现前端路由的功能通过定义路由映射表来控制页面的切换和加载不同的组件。同时导航守卫可以让我们在路由切换前后执行一些逻辑例如检查用户权限、验证用户登录状态等。
VueRouter常用的函数
Vue Router常用的函数包括 VueRouter构造函数用于创建一个Vue Router实例可以在创建实例时传入一些配置选项。例如 const router new VueRouter({routes: [// 路由映射表],mode: history // 路由模式默认为hash模式
})router.push()用于在代码中进行路由的跳转将会导航到一个新的URL。可以传入一个字符串路径或者一个描述地址的对象。例如 // 字符串路径
router.push(/home)// 对象
router.push({ path: /home })router.replace()与router.push()类似不同的是使用router.replace()进行路由跳转时不会留下浏览历史记录。例如 router.replace(/home)router.go()用于在浏览器历史记录中前进或后退指定的步数。接受一个整数作为参数正数为前进负数为后退。例如 // 前进一页
router.go(1)// 后退一页
router.go(-1)router.beforeEach()导航守卫钩子函数在路由切换前执行可以用于进行一些逻辑判断或者权限验证。例如 router.beforeEach((to, from, next) {// 在此处进行权限验证等操作next()
})router.afterEach()导航守卫钩子函数在路由切换后执行一般用于处理一些页面切换后的操作。例如 router.afterEach((to, from) {// 在此处执行一些操作
})这些是Vue Router中常用的函数通过使用这些函数可以实现路由的跳转、导航守卫和浏览历史记录等功能。
Vue Router的使用
Vue2的路由是通过Vue Router实现的它可以帮助我们在Vue应用中实现页面之间的切换和导航。
安装Vue Router
首先我们需要在项目中安装Vue Router
npm install vue-router3创建router import Vue from vue;
//引入VueRouter
import VueRouter from vue-router
//引入路由组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue
Vue.use(VueRouter)
//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,},],
})//暴露router
export default router引入router
然后在Vue的入口文件main.js中我们需要引入Vue Router并使用它
//该文件是整个项目的入口文件
//引入vue相当于以前在html中引入了vue.js
import Vue from vue
//引入app组件它是所有组件的父组件App组件的父组件是vm即一人之下万人之上
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false
import router from /router;//引入router//创建Vue实例对象————vm
new Vue({router,//引入router//render函数用于把App组件中的template模板结构渲染到页面中即将App组件放入到容器中render: h h(App),
}).$mount(#app)//该行代码一样可以写在new Vue({el:#app}})在上面的代码中我们首先引入Vue Router并使用Vue.use()将其安装到Vue中。
然后我们创建一个路由实例其中包含了我们的路由配置。在配置中我们可以通过mode属性指定路由模式可以是hash模式或history模式通过routes属性指定路由的详细配置。每个路由都包含了一个path属性表示路由路径一个name属性表示路由名称以及一个component属性表示对应的组件。
接下来我们在Vue实例中将路由实例注入这样就可以在整个应用中使用路由了。
使用
在我们的组件中我们可以使用Vue Router提供的router-link组件来生成路由链接使用router-view组件来显示当前路由对应的组件。 App.vue内容
templatedivrouter-link to/Home/router-linkrouter-link to/aboutAbout/router-link!--指定展示位置--router-view/router-view/div
/template在上面的代码中router-link组件可以通过to属性指定要跳转的路由路径。router-view组件则会根据当前路由显示对应的组件。
通过以上配置我们就可以实现基本的页面路由导航了。当我们点击router-link组件时路由会自动切换到指定的路由并将对应的组件渲染到router-view组件中。
备注 路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。 通过切换“隐藏”了的路由组件默认 是被 销毁 掉的需要的时候再去挂载。 每个组件都有自己的$route属性里面存储着自己的路由信息。 整个应用只有一个 router可以通过组件的$router属性获取到。
Vue多级路由嵌套路由
编写组件 message.vue
template
div本台最新消息...
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Message
}
/scriptstyle scoped/stylenews.vue
template
div新华社....
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: news
}
/scriptstyle scoped/stylehome.vue
template
div styleborder: 1px dashed green;margin: 10pxspan主页/spanbrrouter-link to/home/news新闻/router-linknbsp;nbsp;nbsp;nbsp;nbsp;nbsp;router-link to/home/message消息/router-linkrouter-view/router-view
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Home
}
/scriptstyle scoped/style配置嵌套路由
router/index.js
import Vue from vue;
//引入VueRouter
import VueRouter from vue-router
//引入路由组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue
import News from ../pages/home/News.vue
import Message from ../pages/home/Message.vue
Vue.use(VueRouter)
//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,children: [//通过children配置子级路由{path: news, //此处一定不要写/newscomponent: News,},{path: message, //此处一定不要写/messagecomponent: Message,},],},]
})//暴露router
export default routerVue中的动态路由
在Vue2中动态路由是指根据用户的输入或操作动态地生成和处理路由。Vue Router是Vue.js官方提供的路由管理插件在Vue Router中可以通过配置动态路由来实现根据用户需要加载不同的组件或页面。
代码示例
父组件Home.vue
template
div styleborder: 1px dashed green;margin: 10pxspan主页/spanbrrouter-link to/home/news/666/反犹太意识法案新闻/router-linknbsp;nbsp;nbsp;nbsp;nbsp;nbsp;router-link to/home/message/秘密消息消息/router-linkrouter-view/router-view
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Home
}
/scriptstyle scoped/style子组件
news.vue两个参数
template
div新华社....pid:{{id}}/pptitle:{{title}}/p
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: news,data() {return {id:this.$route.params.id,title:this.$route.params.title}}
}
/scriptstyle scoped/stylemessage.vue一个参数
template
div本台最新消息...pmsg:{{msg}}/p
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Message,data(){return{msg:}},created() {this.msg this.$route.params.msg;}
}
/scriptstyle scoped/style路由配置
import Vue from vue;
//引入VueRouter
import VueRouter from vue-router
//引入路由组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue
import News from ../pages/home/News.vue
import Message from ../pages/home/Message.vue
Vue.use(VueRouter)
//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,children: [//通过children配置子级路由{path: news/:id/:title, //此处一定不要写/newscomponent: News,},{path: message/:msg, //此处一定不要写/messagecomponent: Message,},],},]
})//暴露router
export default router路由的 query 参数
跳转的路径中添加要传递的参数信息类似于get方式使用{{this.$route.query.id}}获取对应的参数值
父组件Home.vue
改变news组件的传值方式
template
div styleborder: 1px dashed green;margin: 10pxspan主页/spanbrrouter-link to/home/news?id666title反犹太意识法案新闻/router-linknbsp;nbsp;nbsp;nbsp;nbsp;nbsp;router-link to/home/message/秘密消息消息/router-linkrouter-view/router-view
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Home
}
/scriptstyle scoped/style改变news.vue组件取参方式
template
div新华社....pid:{{id}}/pptitle:{{title}}/p
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: news,data() {return {id:this.$route.query.id,title:this.$route.query.title}}
}
/scriptstyle scoped/style改变路由配置
import Vue from vue;
//引入VueRouter
import VueRouter from vue-router
//引入路由组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue
import News from ../pages/home/News.vue
import Message from ../pages/home/Message.vue
Vue.use(VueRouter)
//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,children: [//通过children配置子级路由{path: news, //此处一定不要写/newscomponent: News,},{path: message/:msg, //此处一定不要写/messagecomponent: Message,},],},]
})//暴露router
export default router命名路由
防止路由路径的路径较长编写起来不方便为路由配置设置name属性跳转的时候使用:to“name:’配置的name的值’”另外在Vue2中可以使用路由对象的params属性来传递对象参数。
组件配置
给组件赋予name属性
import Vue from vue;
//引入VueRouter
import VueRouter from vue-router
//引入路由组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue
import News from ../pages/home/News.vue
import Message from ../pages/home/Message.vue
Vue.use(VueRouter)
const originalPush VueRouter.prototype.push
VueRouter.prototype.push function push(location) {return originalPush.call(this, location).catch(err err)
}
//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,children: [//通过children配置子级路由{path: news, //此处一定不要写/newsname: homeNews,//name属性component: News,},{path: message/:msg, //此处一定不要写/messagecomponent: Message,},],},]
})//暴露router
export default router父组件传对象参数/Home.vue
template
div styleborder: 1px dashed green;margin: 10pxspan主页/spanbrrouter-link to/home/message/秘密消息消息/router-linknbsp;nbsp;nbsp;nbsp;router-link :to{name:homeNews,params: {id:666,title:王祖贤法案}}新闻/router-link
!-- button clicktoNews新闻/button--router-view/router-view
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Home,data(){return {news:{id:666,title:王祖贤法案}}},methods:{toNews(){const push {name:homeNews,params:this.news}this.$router.push(push)}}
}
/scriptstyle scoped/style路由的 props 配置
在路由的 props 配置中我们可以使用以下方式来设置和使用 静态配置 const routes [{path: /,component: Home,props: { foo: bar } // 设置静态的 props}
];动态配置 const routes [{path: /,component: Home,props: (route) ({ id: route.query.id }) // 使用函数返回动态的 props}
];在组件中我们可以通过 props 属性来获取路由传递的参数
props: [foo], // 声明需要接受的参数mounted() {console.log(this.foo); // 使用 props 中的参数
}代码示例动态
路由配置
import Vue from vue;
//引入VueRouter
import VueRouter from vue-router
//引入路由组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue
import News from ../pages/home/News.vue
import Message from ../pages/home/Message.vue
Vue.use(VueRouter)
const originalPush VueRouter.prototype.push
VueRouter.prototype.push function push(location) {return originalPush.call(this, location).catch(err err)
}
//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,children: [//通过children配置子级路由{path: news, //此处一定不要写/newsname: homeNews,component: News,},{path: message, //此处一定不要写/messagecomponent: Message,//props: { author: 记者张三 } // 设置静态的 propsprops: (route) ({msg: route.query.msg,authorNo: route.query.authorNo,authorName: route.query.authorName}) // 使用函数返回动态的 props},],},]
})//暴露router
export default router父组件Home.vue
template
div styleborder: 1px dashed green;margin: 10pxspan主页/spanbrrouter-link to/home/message?msg本台最新消息authorNo101authorName张三消息/router-linknbsp;nbsp;nbsp;nbsp;router-link :to{name:homeNews,params: {id:666,title:王祖贤法案}}新闻/router-link
!-- button clicktoNews新闻/button--router-view/router-view
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Home,data(){return {news:{id:666,title:王祖贤法案}}},methods:{toNews(){const push {name:homeNews,params:this.news}this.$router.push(push)}}
}
/scriptstyle scoped/style子组件message.vue
template
div本台最新消息...pmsg:{{msg}}/ppauthor:{{authorName}}/p
/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Message,props: [msg,authorNo,authorName], // 声明需要接受的参数
}
/scriptstyle scoped/style的 replace 属性
router-link 组件是 Vue Router 提供的用于创建导航链接的组件。replace 属性是 router-link 组件的一个配置选项用于设置导航时是否使用 replace 模式。
默认情况下点击 router-link 组件会使用 push 模式进行导航即会向 history 栈中添加一个新的记录。如果设置了 replace 属性为 true则会使用 replace 模式进行导航即替换当前的 history 记录而不会添加新的记录。
下面是一个使用 replace 属性的示例
templatedivrouter-link to/page1Page 1/router-linkrouter-link to/page2 replacePage 2/router-link/div
/template在上述代码中第一个 router-link 使用默认的 push 模式进行导航点击后会向 history 栈中添加一个新的记录。第二个 router-link 添加了 replace 属性表示使用 replace 模式进行导航点击后会替换当前的 history 记录。
replace 模式可以在某些场景中很有用例如在实现页面重定向时。
编程式路由导航
编程式路由导航是通过代码来进行路由跳转的方式而不是通过用户的交互操作来触发导航。
在 Vue Router 中你可以使用 $router 对象来进行编程式路由导航。$router 对象是 Vue Router 实例的一个属性可以通过 this.$router 来访问。
下面是一些常见的编程式路由导航的示例
使用 push 方法进行导航
// 跳转到指定的路由路径
this.$router.push(/page1);// 跳转到指定的命名路由
this.$router.push({ name: page1 });// 在导航时传递参数
this.$router.push({ path: /page1, query: { id: 1 } });使用 replace 方法进行导航
// 替换当前的路由记录
this.$router.replace(/page2);// 替换当前的命名路由记录
this.$router.replace({ name: page2 });// 在导航时传递参数
this.$router.replace({ path: /page2, query: { id: 2 } });使用 go 方法进行前进或后退导航
// 前进一步
this.$router.go(1);// 后退一步
this.$router.go(-1);// 前进或后退多步
this.$router.go(2);通过使用 $router 对象的方法你可以在组件中进行编程式导航实现页面跳转和导航控制的逻辑。
缓存路由组件
在 Vue Router 中你可以通过 keep-alive 组件来缓存路由组件。keep-alive 组件是 Vue 内置的组件可以将其包裹在需要缓存的路由组件的外层。
下面是一个示例展示如何使用 keep-alive 来缓存路由组件
templatedivrouter-view v-slot{ Component }keep-alivecomponent :isComponent //keep-alive/router-view/div
/templatescript
export default {// ...
}
/script在上面的示例中keep-alive 组件包裹了 component 组件:is 属性根据当前路由的组件动态地渲染对应的组件。
这样当切换到其他路由后再返回到被缓存的路由该路由组件将会被从缓存中取出并重新渲染而不是重新创建一个新的组件实例。
需要注意的是keep-alive 组件默认会缓存所有被包裹的组件如果你希望只缓存特定的组件可以在路由配置中使用 meta 字段来标记需要缓存的组件然后在 keep-alive 组件上使用 include 或 exclude 属性来指定要缓存的组件。
例如将只缓存具有 meta 字段为 keepAlive: true 的组件
templatedivrouter-view v-slot{ Component }keep-alive :includeincludedComponentscomponent :isComponent //keep-alive/router-view/div
/templatescript
export default {computed: {includedComponents() {return this.$route.matched.filter(route route.meta.keepAlive).map(route route.components.default);}}
}
/script在上面的示例中includedComponents 计算属性根据当前路由的 matched 属性来过滤出具有 keepAlive: true 的组件并返回这些组件的 default 组件。然后将 includedComponents 数组传递给 keep-alive 组件的 include 属性。这样只有被标记为 keepAlive: true 的组件才会被缓存起来。
新的生命周期钩子activated 和 deactivated 作用路由组件所独有 的两个钩子用于捕获路由组件的激活状态。 具体名字 activated路由组件被激活时触发。deactivated路由组件失活时触发。
Vue2中的路由守卫
在Vue2中路由守卫是一种机制用于在导航到特定路由之前或之后执行一些逻辑。它们可以用于控制访问权限检查用户登录状态执行一些初始化操作等。 路由守卫分为全局守卫和组件级守卫。
全局守卫
全局守卫包括三种 前置守卫beforeEach在导航之前被调用可以用来进行身份验证等操作。可以通过router.beforeEach()来注册全局前置守卫。 后置钩子afterEach在导航完成之后被调用无法改变导航本身。可以通过router.afterEach()来注册全局后置钩子。 重用组件钩子beforeRouteUpdate在组件被重用时调用例如从 /users/1 导航到 /users/2。
组件级守卫
组件级守卫包括四种 路由独享的守卫beforeEnter在路由配置中定义的守卫只在该路由中生效。 组件内的守卫可以在组件中定义beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave三个生命周期函数作为守卫。
路由守卫的使用方法 在创建Vue Router实例之前要先引入Vue Router模块。 import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)创建路由实例并配置路由规则。 const router new VueRouter({routes: [{ path: /home, component: Home },{ path: /about, component: About }]
})注册全局前置守卫。 router.beforeEach((to, from, next) {// 在进入路由之前执行的逻辑next()
})注册全局后置钩子。 router.afterEach((to, from) {// 在路由完成之后执行的逻辑
})在组件中定义组件内守卫。 export default {beforeRouteEnter(to, from, next) {// 在进入路由之前执行的逻辑next()},beforeRouteUpdate(to, from, next) {// 在组件被重用时执行的逻辑next()},beforeRouteLeave(to, from, next) {// 在离开路由之前执行的逻辑next()}
}通过使用路由守卫可以对路由的导航进行控制和管理实现更好的用户体验和安全防护。
Vue2中路由器的两种工作模式
在Vue2中路由器Vue Router有两种工作模式分别是哈希模式hash mode和历史模式history mode。
哈希模式hash mode
默认使用的是哈希模式即URL中会带有一个以#开头的哈希值。在这种模式下路由器会监听浏览器URL中哈希值的变化并根据哈希值来匹配对应的路由。哈希模式的URL在改变时不会触发页面的刷新因此可以实现单页面应用SPA的效果。
const router new VueRouter({mode: hash,routes: [{ path: /home, component: Home },{ path: /about, component: About }]
})在哈希模式下访问http://example.com/#/home会加载Home组件访问http://example.com/#/about会加载About组件。
特点 地址中永远带着#号不美观 。 若以后将地址通过第三方手机 app 分享若 app 校验严格则地址会被标记为不合法。 兼容性较好。
历史模式history mode
历史模式使用HTML5 History API来管理URL可以去掉URL中的哈希值使URL更加友好和美观。在这种模式下路由器会监听浏览器历史记录的变化并根据路径来匹配对应的路由。需要注意的是在使用历史模式时需要服务器的支持以便正确地响应URL避免404错误。
const router new VueRouter({mode: history,routes: [{ path: /home, component: Home },{ path: /about, component: About }]
})在历史模式下访问http://example.com/home会加载Home组件访问http://example.com/about会加载About组件。
特点
地址干净美观 。兼容性和 hash 模式相比略差。应用部署上线时需要后端人员支持解决刷新页面服务端 404 的问题。
connect-history-api-fallback 用来解决 history 之后 404 NOT FOUND 的问题npm i connect-history-api-fallback通过选择合适的工作模式可以根据项目需求来决定路由器的工作方式提供更好的用户体验和URL美观性。
