初识vue-router

要努力奋斗鸭

已于 2023-07-09 20:11:32 修改

阅读量54

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-09 20:09:56 首次发布

本文链接：https://blog.csdn.net/weixin_52512511/article/details/131624677

版权

文章详细介绍了如何在Vue项目中使用vue-router插件进行前端路由配置，包括引入vue-router库，定义组件，设置路由规则，初始化路由实例，并将路由挂载到Vue根实例，以及使用router-link和router-view进行页面跳转和组件渲染。

摘要由CSDN通过智能技术生成

目标：使用基于vue的插件vue-router来实现前端路由功能

vue-router是一个基于vue的插件，实现前端路由功能的，在基于vue的项目当中使用

文档地址： https://router.vuejs.org/zh/

下载地址：https://unpkg.com/vue-router/dist/vue-router.js

使用步骤：

引入，vue.js的下面

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

vue-router控制的是（地址--vue-->组件）,所以是先准备组件
vue-router实现的是不同的地址对应不同的组件

// 组件配置对象
const Home = {template:'<b>首页界面</b>'}
const My = {template:'<b>我的音乐界面</b>'}
const Friend = {template:'<b>朋友界面</b>'}

定义路由规则（什么地址----> 什么组件）

// routes路由规则配置
const routes = [
  // path:路径 component:组件 固定写法
  {path: '/', component: Home},
  {path: '/my', component: My},
  {path: '/friend', component: Friend}
]

初始化vue-router这个插件，使用路由规则

//引入插件后，全局变量VueRouter 构造函数
//router路由实例
const router = new VueRouter({
    //路由插件配置对象
    //routes配置选项作用是：指定路由规则
    routes
})

把实例好的router对象，挂载到vue的根实例（#app的vue实例）中，才能vue+vue-router配合使用

// 其实所有的组件都是在#app容器下显示渲染的
// 所以也可以把#app容器称为根容器，管理这个容器的vue实例，称为：根vue实例
new Vue({
  el: '#app',
  // router 选项：配置路由实例
  router
})

使用 router-link 来当跳转连接 (默认解析成a标签)

<nav>
    <router-link to="/">首页</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friend">朋友</router-link>
</nav>

使用 router-view的指定路由对应的组件显示的位置

 <div id="page">
      <!-- 显示路由对应的组件 -->
      <router-view></router-view>
 </div>

案例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>

    <div id="app">
        
    </div>

    <script src="./vue.js"></script>
    <!-- 第一步 引入-->
    <script src="./vue-router.js"></script>
    <script>
    // 第二步 组件配置对象
    const Home = {template:'<b>首页界面</b>'}
    const My = {template:'<b>我的音乐界面</b>'}
    const Friend = {template:'<b>朋友界面</b>'}
    //第三步 定义路由规则
    const routes = [
      { path:'/' , component: Home},
      { path:'/my ' , component: My},
      { path:'/friend' , component: Friend},
   ]
    // 第四步  初始化 vue-router
    const router = new VueRouter({ routes })
    
    const vm = new Vue({
       el: '#app',
       // 第五步 挂载router到vue根实例下
       router
     })
  </script>
  </body>
</html>

总结：

引入
配置对象
定义路由规则
初始化
挂载根实例
router-link跳转
渲染组件位置router-view

要努力奋斗鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识vue-router

vue-router是一个基于vue的插件，实现前端路由功能的，在基于vue的项目当中使用。目标：使用基于vue的插件vue-router来实现前端路由功能。使用 router-view的指定路由对应的组件显示的位置。
复制链接

扫一扫