Vue路由--router(未完待续)

本文介绍了Vue中的路由使用方法,包括如何定义路由对应的内容组件、配置路由、创建路由实例及注入到Vue实例的过程。通过实例展示了如何利用`router-link`组件进行导航,以及如何使用`router-view`组件显示路由内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在前端开发的生涯中,很有可能会开发SPA(single page appaication)单页面应用,单页面应用少不了用到路由,那么Vue中的路由是怎么用的呢,下面我们就来探讨一下:

一、Vue路由简介:

用来开发SPA(单页面应用),根据不同的url地址显示不同的内容,但显示在同一个页面中。

二、基本用法

引用:需要额外的引用vue-router.js插件

HTML部分

a).使用内置组件`router-link`组件来定义导航,组件的属性`to`指定连接到的url;
b).使用内置组件`router-view`组件来显示路由内容;例如:

<div class="nav">
            <!-- 使用router-link组件来定义导航,to属性指定连接到的url -->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
            <!-- 最后被渲染成a标签 -->
        </div>
        <div class="content">
            <!-- 使用router-view来显示路由内容 -->
            <router-view></router-view>
        </div>

JS部分

a).定义路由对应的内容组件
b).配置路由
c).创建路由的实例
d).创建Vue实例,并将创建的路由实例挂载到Vue实例上(注入路由),例如:

第一步:定义路由对应的内容组件

var home = {//路由组件
    template:"<h3>我是主页内容</h3>"
}
var news = {//同上
    template: "<h3>我是新闻内容</h3>"
}
第二步:配置路由

var routes = [//是数组,其中的每一项都代表一个路由
    {path:"/home",component:home},//component表示对应的内容组件指向哪个组件
    {path: "/news", component: news },
    {path: "*", redirect:"/home"},//路由的重定向,当找不到匹配的路由时默认定向到home组件
]
第三步:创建路由的实例

var router = new VueRouter({
    routes:routes,//必须
    mode:"history",//修改路由的模式,默认是hash,可以是history,abstract
    linkActiveClass:"active",//修改活动链接的class类名
    // 还有其他的配置项...
})
第四步:创建Vue实例,并将创建的路由实例挂载到Vue实例上(注入路由)
var app = new Vue({
    el:"#container",
    router:router,//注入路由
    data:{
        greeting:"hello,world!",
        task:{
            content:"完成数据分发工作",
            timeLine:"2018-3-20",
            joiner:"张三"
        }
    }
})
















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值