Vue 路由配置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43137725/article/details/103675127

本文详细介绍了如何在Vue项目中配置和使用vue-router，包括基本的路由引入、设置和导航。

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

配置路由需要引入 vue-router

<div id="app">
    // a标签使 hash跳转 必须前面加一个#标记
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    //a标签的简写形式
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>
    
    // 这是 vue-router 提供的元素，我们可以把 router-view 认为是一个占位符
    // 匹配到的路由，会展示到 router-view 中去
    <router-view></router-view>
</div>


<script src="../js/vue.min.js"></script>
//配置路由需要引入vue-router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

var login = {
    template: '<h1>login</h1>'
};
var register = {
    template: '<h1>register</h1>'
};

var router = new VueRouter({
    routes: [
        // 路由重定向
        {path: '/', redirect: '/login'},
        // component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
        {path: '/login', component: login},
        {path: '/register', component: register},
    ],
    //修改高亮的提示，参考vue-router 官网
    // https://router.vuejs.org/zh/api/#active-class
    linkActiveClass:'active-zm'
});
new Vue({
    el: '#app',
    //将路由匹配规则，挂载到实例上，来监听url地址的变化，来匹配规则展示不同组件
    router,
});

vue路由配置