vue路由入门

最新推荐文章于 2025-07-20 16:34:49 发布

原创最新推荐文章于 2025-07-20 16:34:49 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

都是以三方组件的形式存在的 vue有官方的三方组件 vue-router

vue路由是为了实现组件间的跳转。与components的区别是不用写在一个页面中，为模块化开发时提供方便。

使用步骤如下：

1：用定义变量的方式定义组建的配置项

var Home = {

name:”home”,

template:”#home”

};

var News = {

template:”#news”

};

2.1：定义路由关系对象（将配置项与路径进行关联）

const routes = [

{path:”/”,component:Home},

{path:”/news”,component:News}

]

2.2 传入配置项，实例路由和组件（将关联后的参数导入到路由实例中）

const router = new VueRouter({

//routes:routes

routes

})

3.在容器中注入路由注册路由（由路由实例注册到vue实例中）

new Vue({

el:”#app”,

//router:router

router

})

<div>

//router-link 类似于a标签

<router-link to=”/”>首页</router-link>

<router-link to=”/news”>新闻</router-link>

<div/>

<hr>

//如果想要完成一些复杂的动画效果，可以将router-view 包裹在transition里面

<router-view class=”a”></router-view>

</transition>

<div>

</div>

</template>

----------------------------------------------------------------

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aaa</title>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <hr>
    <!--作用类似于占位符-->
    <router-view></router-view>
</div>

<template id="news">
    <div>
        <h1>新闻</h1>
    </div>
</template>

<template id="home">
    <div>
        <h1>首页</h1>
    </div>
</template>

<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript">
  /*  Vue.component("news",{
        template:"#news"

    });
    Vue.component("home",{
        template:"#home"
    });*/
    //用定义变量的方式定义组件的配置项
    var Home = {
        name:"home",
        template:"#home"
    };
    var News = {
        name:"news",
        template:"#news"
    };
    //定义路由关系对象（将配置项与路径进行关联）
    const routes =[
        {path:"/",component:Home},
        {path:"/news",component:News},
    ];
    //传入配置项，实例路由和组件（将关联后的参数导入到路由实例中）
    const router = new VueRouter({
        //routes:routes
        routes
    });
    //在容器中注入路由 注册路由 （由路由实例注册到vue实例中）
    new Vue({
        el:'#app',
        //router:router
        router
    });
</script>
</body>
</html>