WEB前端：vuejs全家桶（29）：vue-router路由

最新推荐文章于 2022-11-17 15:54:25 发布

hahahafree

最新推荐文章于 2022-11-17 15:54:25 发布

阅读量142

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102977932

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

vue-router路由

1. 简介

使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

  `[参考](https://router.vuejs.org/zh-cn) `

bower info vue-router
cnpm install vue-router -S

文档
https://router.vuejs.org/zh/

2. 基本用法

a.布局
b.配置路由

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>

<body>
    <div id="itany">
        <div>
            <!-- 第1步：使用router-link组件来定义导航，to属性指定链接url -->
            <router-link to="/home">主页</router-link>
            <router-link to="/new">新闻</router-link>
        </div>
        <div>
            <!-- 第2步：router-view用来显示路由内容 -->
            <router-view></router-view>
        </div>
    </div>

</body>
<script>
    // 第3步：定义组件
    var Home = {
        template: '<h3>我是主页</h3>'
    }
    var News = {
            template: '<h3>我是新闻</h3>'
        }
        // 第4步：配置路由
    const routes = [{
            path: '/home',
            component: Home
        }, {
            path: '/new',
            component: News
        }, ]
        // 第5步：创建路由实例
    const router = new VueRouter({
            routes, //简写，相当于routes:routes

        })
        // 第6步：创建根实例并将路由挂载到Vue实例上
    new Vue({
        el: '#itany',
        router //注入路由
    });
</script>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        /* .router-link-active{
                font-size:20px;
                color:#ff7300;
                text-decoration:none;
            } */
        
        .active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="itany">
        <div>
            <!-- 第1步：使用router-link组件来定义导航，to属性指定链接url -->
            <router-link to="/home">主页</router-link>
            <router-link to="/new">新闻</router-link>
        </div>
        <div>
            <!-- 第2步：router-view用来显示路由内容 -->
            <router-view></router-view>
        </div>
    </div>

</body>
<script>
    // 第3步：定义组件
    var Home = {
        template: '<h3>我是主页</h3>'
    }
    var News = {
            template: '<h3>我是新闻</h3>'
        }
        // 第4步：配置路由
    const routes = [{
                path: '/home',
                component: Home
            }, {
                path: '/new',
                component: News
            }, {
                path: '*',
                redirect: '/home'
            } //重定向
        ]
        // 第5步：创建路由实例
    const router = new VueRouter({
            routes, //简写，相当于routes:routes
            // mode: 'history',
            linkActiveClass: 'active' //更新活动链接的class类名


        })
        // 第6步：创建根实例并将路由挂载到Vue实例上
    new Vue({
        el: '#itany',
        router //注入路由
    });
</script>

</html>

在这里插入图片描述

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：vuejs全家桶（29）：vue-router路由

vue-router路由1. 简介使用Vue.js开发SPA（Single Page Application）单页面应用根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用 `[参考](https://router.vuejs.org/zh-cn) `bower info vue-routercnpm install vue-router -S文档htt...
复制链接

扫一扫