Vue Router前端路由

原创

别团等shy哥发育 2023-02-13 11:42:26 博主文章分类：Vue ©著作权

文章标签 vue vue.js Vue ide 应用程序 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者别团等shy哥发育的原创作品，请联系作者获取转载授权，否则将追究法律责任

感受前端路由

1、简介
2、HTML页面使用路由

1、简介

传统的Web应用程序不同页面间的跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面。在单页应用程序中，不同视图(组件的模板)的内容都是在同一个页面中渲染，页面间的跳转都是在浏览器端完成，这就需要用到前端路由。在Vue.js中，可以使用官方的路由管理器Vue Router。
Vue Router需要单独下载，可以使用CDN方式应用Vue Router

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

如果使用模块化开发，则使用npm安装方式，执行以下命令安装Vue Router。

npm install vue-router@next --save

提示：安装Vue Router时，要安装支持Vue3.0的新版本Vue Router,即这里的vue-router@next。支持vue2.0的Vue Router的版本名是vue-router。

2、HTML页面使用路由

前端路由的配置有固定的步骤。
（1）使用router-link组件设置导航链接

<router-link to="/">主页</router-link>
                <router-link to="/news">新闻</router-link>
                <router-link to="/books">图书</router-link>
                <router-link to="/videos">视频</router-link>

to属性指定链接的URL，<router-link>默认会被渲染为一个<a>标签。
（2）指定组件在何处渲染，这是通过<router-view>指定的。

<router-view></router-view>

（3）定义路由组件。

//定义路由组件
        //可以从其他文件import进来
        const Home={template:'<div>主页面</div>'}
        const News={template:'<div>新闻页面</div>'}
        const Books={template:'<div>图书页面</div>'}
        const Videos={template:'<div>视频页面</div>'}

这里只是为了演示前端路由的基本用法，所以组件定义很简单。
（4）定义路由，将第（1）步设置的链接URL和组件对应起来。

//定义路由
        //每个路由应该映射到一个组件
        const routes=[
            {path:'/',component:Home},
            {path:'/news',component:News},
            {path:'/books',component:Books},
            {path:'/videos',component:Videos}
        ]

（5）创建VueRouter实例，将第（4）步定义的路由配置作为选项传递进去。

//传递routes选项，创建router实例
        const router=VueRouter.createRouter({
            //提供要使用的history实现。简单起见，在这里使用hash history
            history:VueRouter.createWebHashHistory(),
            routes  //(简写)相当于routes:routes
        })

（6）调用应用程序实例的use()方法，传入第（5）步创建的router对象，从而让整个应用程序具备路由功能。

const app=Vue.createApp({})
        //使用路由器实例，从而让整个应用都具有路由功能
        app.use(router)
        app.mount('#app')

完整代码如下所示。
routers.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>
            <!-- 使用router-link组件导航 -->
            <!-- 通过to属性指定链接 -->
            <!-- <router-link>默认会被渲染一个<a>标签 -->
                <router-link to="/">主页</router-link>
                <router-link to="/news">新闻</router-link>
                <router-link to="/books">图书</router-link>
                <router-link to="/videos">视频</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将在这里渲染 -->
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>
    <script>
        //定义路由组件
        //可以从其他文件import进来
        const Home={template:'<div>主页面</div>'}
        const News={template:'<div>新闻页面</div>'}
        const Books={template:'<div>图书页面</div>'}
        const Videos={template:'<div>视频页面</div>'}

        //定义路由
        //每个路由应该映射到一个组件
        const routes=[
            {path:'/',component:Home},
            {path:'/news',component:News},
            {path:'/books',component:Books},
            {path:'/videos',component:Videos}
        ]

        //传递routes选项，创建router实例
        const router=VueRouter.createRouter({
            //提供要使用的history实现。简单起见，在这里使用hash history
            history:VueRouter.createWebHashHistory(),
            routes  //(简写)相当于routes:routes
        })
        const app=Vue.createApp({})
        //使用路由器实例，从而让整个应用都具有路由功能
        app.use(router)
        app.mount('#app')
    </script>

</body>
</html>