vue路由:vue-router
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
下载方式:npm install vue-router
html:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue路由</title><script src="vue.min.js"></script><script src="vue-router.min.js"></script> </head> <body><div id="box"><div><router-link to="/home">主页</router-link><router-link to="/news">新闻</router-link><router-link to='/about'>关于</router-link></div><div><router-view></router-view></div></div> </body> </html>
JavaScript:
<script>//组件const Home = {template:'<h3>我是主页</h3>'};const News = {template:'<h3>我是新闻</h3>'}const About = {template:'<h3>我是关于</h3>'}//配置路由const routes = [ {path:'/home', component :Home},{path:'/news', component:News},{path:'/about',component:About},//重定向{path:'*',redirect:'/home'}]//生成路由实例const router = new VueRouter({routes})//挂载到vue上new Vue({router,el:'#box'})</script>
CSS:
<style>.router-link-active{background: #ccc;padding: 5px;text-decoration: none;} </style>
总体:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue路由</title><script src="vue.min.js"></script><script src="vue-router.min.js"></script><style>.router-link-active{background: #ccc;padding: 5px;text-decoration: none;}</style> </head> <body><div id="box"><div><router-link to="/home">主页</router-link><router-link to="/news">新闻</router-link><router-link to='/about'>关于</router-link></div><div><router-view></router-view></div></div><script>//组件const Home = {template:'<h3>我是主页</h3>'};const News = {template:'<h3>我是新闻</h3>'}const About = {template:'<h3>我是关于</h3>'}//配置路由const routes = [ {path:'/home', component :Home},{path:'/news', component:News},{path:'/about',component:About},//重定向{path:'*',redirect:'/home'}]//生成路由实例const router = new VueRouter({routes})//挂载到vue上new Vue({router,el:'#box'})</script> </body> </html>
