Vue router中path和component的作用

最新推荐文章于 2023-12-20 15:32:24 发布
最新推荐文章于 2023-12-20 15:32:24 发布
阅读量4.3k 收藏 6
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43368552/article/details/124958920
版权

在这里插入图片描述

path是路由参数，当url路径匹配到当前路由参数时，就会跳转到component所对应的页面组件
在本例子里面：当url地址是只有/的时候，自动跳转到Home这个组件页面。相当于通过path的信息跳转到对应的component页面。

component是获取跳转页面的地址
方式一：
和引入组件一样 先把要跳转的页面引入router js文件中再进行调用

方式二：
直接在component获取要跳转页面的位置

小番水源
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:’history’, 原因如下 补充知识：vue-router配置后地址栏输入跳转不
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE框架CLI组件化配置Router路由局部守卫path和componet和router完整项目实现------VUE框架
最新发布
吾不识青天高黄地厚。唯见月寒日暖，来煎人寿。
12-20 1050
VUE框架CLI组件化配置Router路由局部守卫path和componet和router完整项目实现------VUE框架
vue动态渲染路由
RubyLinT的博客
08-02 481
router.js import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) let list = [ {Name:'Home',View:'views/Home.vue'}, {Name:'Char...
vue-router-动态路由的使用
vfjcgg的博客
06-29 473
vue-router-动态路由的使用 动态路由 在某些情况下，一个页面中的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径： / user /aaa 或 / user /bbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式） 配置路由映射关系之前要先将组件导入 index.js文件中配置的路由： { path:'/user/:userId', component:User
vue-router 基本使用
顺其自然~专栏
03-31 871
路由，其实就是指向的意思（路者，道也。路就是往来通行的地方。由，则是经过，比如必由之路，就是必须要经过的道路或地方。），当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射。所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么..
RouteComponent 路由组件
衣乌安、随笔
12-29 8792
  route component（路由组件） 指的是一个直接被 route（路由）（例如 <Route component>）渲染出的 component（组件）。router（路由器）会从路由组件中创建元素，并且把它们作为 this.props.children 提供给上一层的路由组件。除了 children，路由组件还会接收以下props： router – router...
Vue router components 多层命名视图如何操作
352328759的博客
01-14 3536
独生政策的时候, 只有一个后代, 叫"孩子"肯定没错 但开放多胎之后, 就不止一个后代了, 如果对着所有后代喊"孩子", 谁都分不清是谁 这个时候就需要给后代命名 同理, 在路由中一个视图套一个视图时, 还能相安无事, 因为它们都叫 default 但一个视图套多个视图时, 就应该给视图加上 name 属性 <router-view></router-view> <router-view name="a"></router-view> <router-v
解决vue的router组件component在import时不能使用变量问题
weixin_41656074的博客
03-10 4239
webpack 编译es6 动态引入 import() 时不能传入变量，例如dir ='path/to/my/file.js' ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js')，这是因为webpack的现在的实现方式不能实现完全动态。 但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块，但运行时确定myFile的值才会加...
vue-router当中内置component标签(组件)的使用
动感超人的博客
10-28 2643
可以传入字符串,也可以传入组件。
vue-router重定向和路由别名的使用讲解
12-11
一、重定向（你访问这个路径，但他跳到另一个路径，地址栏中显示目标路由的那个路径） “重定向”的意思是，当用户访问 /a时，...const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/
Vue Router去掉url中默认的锚点#
12-04
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。 如果不想要这种默认的hash模式，可以用路由的history模式，这种模式充分的利用history.pushState API来完成URL...
vue-router实现嵌套路由的讲解
01-19
需要注意的是：父组件中的<router></router>是子组件的占位符是必不可少的 嵌套路由的现象：点击了路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址栏的路径也随之改变。 // 嵌套路由 { path: ...
解决vue-router路由拦截造成死循环问题
11-19
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环. router的index.js文件路由配置 const router = new Router({ routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: ...
vue路由动态增加组件渲染
qq_43505774的博客
12-16 789
export const routes = [ { path: '/', name: 'Home', component: Home, { path: '/', // 必须含有默认 才能动态 component: { render: h => h('div',{},12311) } }] }, { path: '/about', name: 'About', // route
vue-router
u014105655的博客
11-08 254
vue-router 使用记录
vue-router不同的路由共用一个组件component的问题
qq_32615575的博客
05-18 9055
在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view watch 除了可以监听数据的变化，路由的变化也能被其监听到 :key vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可 针对以上，经过本人项目实践以及网友贡献，有三种方法可解决： 方法一：通过 watch 监听路由（亲测可行） 1
关于Vue实现动态路由component找不到组件的问题(Error: Cannot find module ‘@/views/User‘)
热门推荐
提笔忘字的帝国
03-22 1万+
Error: Cannot find module '@/views/User';store sync?5d98:2 Uncaught (in promise) Error: Cannot find module '@/views/User'
VUE之vue router
wchg21131的博客
06-18 1348
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为：后端路由[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i3BoE4eu-1687068778679)(images/后端路由.png)]SPA（Single Page Application）前端路由[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sl9ISEKA-1687068778680)(images/前端路由.png)]基于URL中的hash实现（点击菜单的时候
vue router中的 component 有什么左右
06-06
const router = new VueRouter({ routes: [ { path: '/home', component: Home // 组件对象 }, { path: '/about', component: Vue.extend({ // 组件对象 }) }, { path: '/user', component: 'User' //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值