都是以三方组件的形式存在的 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里面
<transition enter-class =”animated bounceInLeft” leave-active-class=”animat”>
<router-view class=”a”></router-view>
</transition>
<template id=”news”>
<div>
<h1>新闻</h1>
</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>