Vue路由--router（未完待续）_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:"张三"
        }
    }
})