详解---vue-router路由和router-link

最新推荐文章于 2024-07-13 13:07:05 发布
最新推荐文章于 2024-07-13 13:07:05 发布
阅读量4.5k 收藏 2
点赞数
分类专栏： 自学VUE+笔记 文章标签： vue-router router-link vue路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36818386/article/details/89504784
版权

1. 安装依赖：npm i vue-router -S

2. 在main.js中引入 `import VueRouter from 'vue-router';`

3. 安装插件 `Vue.use(VueRouter);`

4. 创建路由对象并配置路由规则

5. 将其路由对象传递给Vue的实例

6. 在app.vue中留坑 ` <router-view></router-view>`

然后用router-link中的to属性进行路由:

有什么问题欢迎留言！~~~~

丸子哥哥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
详谈vue中router-link和传统a链接的区别
10-15
主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue-router 命名路由和命名视图
01-21
给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。 二、代码展示： 目录视图 1、命名路由   2、命名视图 index.js import Vue from 'vue' import Router from 'vue-router' import ...
vue-router router-link
酷酷的旭
06-02 5898
个人理解vue-router能够实现当我们点击某个导航链接的时候能够动态的展示一个组件 使用方法： 安装 ：npm install vue-router 在main.js中加载使用 import Vuerouter fom 'vue-router //加载路由模块 Vue.use(VueRouter) //注册到Vue中才可以使用 配置路由表 const router ...
手撕Vue中的RouterLink和RouterView，深入理解其底层原理（一）
最新发布
舜意的博客
07-13 1255
本文我们手撕了RouterLink，对于全局引入组件也有了一个更加深刻的理解相信看到这里的你也一定会有所收获的！！！
router-link 和 router-view的区别
weixin_42479421的博客
09-11 1211
router-link路由跳转，router-view路由出口
＜router-view＞ 和 ＜router-link＞的区别
qq_53348178的博客
05-27 420
【代码】＜router-view＞ 和 ＜router-link＞的区别。
router-view 和 router-link 的区别
YingUser的博客
01-26 8970
1、router-view 和 router-link 的区别 1.router-link和router-view在同一个vue文件（A.vue）里面， 2. router-link设置路由跳转， // <router-link :to="'/url/'"> <li> <a>login</a> </li> 3.，在router/index.js上设置路由 // { path: '/ur...
详解Vue-Router源码分析路由实现原理
10-16
3. 注册`<router-link>`和`<router-view>`两个组件，它们是路由系统的核心，`<router-link>`用于导航，`<router-view>`则负责渲染对应的组件。 路由的匹配和切换主要发生在`create-matcher`和`create-router-map`中...
vue-router 路由基础的详解
08-29
4. **创建路由器实例**：使用 `VueRouter` 构造函数创建实例，并传入路由配置。 ```javascript const router = new VueRouter({ routes // （缩写）相当于 routes: routes }); ``` 5. **创建 Vue 实例**：最后，...
VUE ROUTER---路由
l_l_l_l_l_l_l_li的博客
07-06 956
一、认识和安装vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装vuerouter: npm install vue-router@4 细节：@4代表的是安装vuerouter4最新的版本 二、路由的使用步骤 三、路由的默认路径 四、router-link 通过.router-link-active这个类名可以给router-link这个内置组件样式
router-link 与 router-view是什么东西？
qq_42526440的博客
11-29 1244
初学者理解了SPA(single page web application)，就更容易理解vue中 router-link 与 router-view是什么东西？ 1、router-lin中 //如导航代码 <router-link class="nav-link" to="ContactUs">联系我们</router-link> 通过router-link可以使<router-view/>中的显示内容路由（跳转）到src/router/index.js文件中配置的
vue 的路由router，route和router的区别
qq_41905890的博客
10-13 824
vue 的路由router 1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。 to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" 2.router-view 用于渲染匹配到的组件。 就是从router-link标签中的to路径跳转到router-view页面并在此页面渲染 route和router的区别 $route是获取路由信息的一个对象 $route.path 字符串，
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2138
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
router-link、router-view解析
weixin_43988374的博客
09-19 717
router-link、router-view解析 router-link router-link 默认渲染成<a></a>标签 属性 1、tag='li' 把router-link指定的标签 2、active-class="active" 用来标识选中状态自定样式，类名可以自定义 .active{ color: red; } 3、全局路由选中自定义样式，类名可以自定义；不推荐这样做，推荐使用active-class属性 （1）这是源码 export interf
router-link中传值的三种方式
qq_38729043的博客
08-21 1万+
vue学习:router-link中传值的三种方式 第一种 传值 &amp;lt;router-link tag=&quot;a&quot; :to=&quot;{name: 'Exhibition', params: {img:item}}&quot; class=&quot;thumbnail&quot;&amp;gt; &amp;lt;img class=&quot;xk&quot; :src
vue-router 的 嵌套路由 router-link 声明式导航
qq_44917015的博客
05-07 274
我的理解： 组件的切换可以使用路由来进行实现 类似于一种tab页的进行切换 使用router-link 进行跳转切换组件 从而进行切换页面 以/开头会被当成根路径进行解析 当前的导航方式 声明式导航 路由的配置： 子路由是不需要加/的； { path: "/index", name: "chart3", component: index, // 路由重定向 redirect: "/index/my" , // 子路由是不需要加/的 childr
vue-router的安装和配置 及使用
qq_41501190的博客
01-06 911
1.安装vue-router 终端输入 ： npm install vue-router --save 安装完成后package.json中会多出vue-router的版本信息 2.搭建路由基本框架 1.src 目录下 新建 router 目录 ，router下新建index.js文件 //配置路由的相关信息 import VueRouter from "vue-router"; import Vue from 'vue' //1.通过Vue.use(插件) ，安装插件 Vue.use(VueRo
从零开始学VUE之VueRouter(Vue-router基本使用)
彼岸舞的博客
06-28 143
使用Vue-router 创建组件 About.vue <template> <div> <h2>this is about!</h2> </div> </template> <script> export default { name: "About" } </script&g...
unplugin-auto-import的使用
热门推荐
我是香菜
01-04 1万+
unplugin-auto-import的使用
vue router-view使用详解
09-13
Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 紧密集成，可以让我们轻松地构建单页面应用（SPA）。 在使用 Vue Router 构建单页面应用时，我们通常会使用 `<router-view>` 组件来展示当前路由所对应的组件内容。下面是对 `<router-view>` 组件的使用详解： 1. 定义路由： 在 Vue Router 中，我们需要首先定义路由。可以通过在 `routes` 配置项中定义一个数组来实现，每个路由对象都包含了一个路径和对应的组件。例如： ```javascript import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] ``` 2. 注册路由： 在创建 Vue 实例之前，我们需要将路由配置注册到 Vue 实例中。可以使用 `Vue.use()` 方法来注册 Vue Router 插件。例如： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例： 在注册完插件后，我们可以创建一个路由实例，并将之前定义的路由配置传入。例如： ```javascript const router = new VueRouter({ routes }) ``` 4. 添加路由占位符： 在应用的根组件中，我们需要添加一个 `<router-view>` 组件作为路由占位符。这样，当路由切换时，对应的组件就会渲染在这个占位符中。例如： ```html <template> <div> <router-view></router-view> </div> </template> ``` 注意，`<router-view>` 组件可以放置在任何位置，根据实际需求进行布局。 5. 挂载路由： 最后一步是将路由实例挂载到 Vue 实例上。例如： ```javascript new Vue({ router }).$mount('#app') ``` 至此，我们就完成了 `<router-view>` 组件的使用。当用户访问不同的路由时，对应的组件就会被渲染到 `<router-view>` 中，实现了页面的切换效果。 需要注意的是，`<router-view>` 组件只能用于展示路由对应的组件内容，并不能直接显示其他内容。如果需要在路由切换时显示一些其他元素，可以结合使用 `<router-link>` 组件来实现。 希望以上解答对你有帮助！如有其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丸子哥哥

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值