路由的基本使用

最新推荐文章于 2024-10-18 15:58:53 发布

一览星梦辰

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量106

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_71242735/article/details/130712603

版权

文章介绍了前端路由的概念，特别是在单页面应用中的重要性。通过引入VueRouter库，创建路由实例，配置路由映射，然后将路由挂载到Vue实例上，以及在HTML中预留<router-view>作为展示区域，详细阐述了如何在Vue项目中实现页面间的切换。

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

文章目录

路由

路由

1.什么是路由

1 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

2.路由的基本使用

1.引入文件,这个js需要放在vue的js后面,自动安装(提供了一个VueRouter的构造方法)
2.创建路由new VueRouter(),接受的参数是一个对象
3.在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4.path属性是url的地址,component属性就是显示的组件(传组件的对象)
5.创建的路由需要和vue实例关联一下
6.路由到的组件显示在哪个位置<router-view></router-view>

例如：

2-1.引入文件,这个js需要放在vue的js后面

 <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

2-2.创建路由实例

const router = new VueRouter({

})

2-3.创建映射关系

routes: [
                {
                    path: '/detail',
                    component: detail,
                },
            ],

2-4.将路由实例挂载到vue实例上

const vm = new Vue({
            //4.将路由实例挂载到vue实例上
            router: router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })

2-5.预留展示区域

<div id='app'>
        <!-- 5.预留展示区域 -->
        <router-view></router-view>
 </div>

整体代码：

//先引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- 1.引入文件,这个js需要放在vue的js后面 -->
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

   <div id='app'>
        <!-- 5.预留展示区域 -->
        <router-view></router-view>
 </div>
 <script>
  //创建detail,对应routes里面的detail
        let detail = {
            template: '<h1>需要展示的内容</h1>'
        }
        
   //2.创建路由实例
        const router = new VueRouter({
            //3.创建映射关系
            routes: [
                {
                    path: '/', //写路径,写哪个路径就到哪个路径下的页面查看 如 写 /detail 就要在路径上添加detail
                    component: detail,
                },
            ],
        })
        
		const vm = new Vue({
            //4.将路由实例挂载到vue实例上
            router: router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })
 </script>