前端vue路由配置,组件联动
现在已经成功把主页面的框架搭建好,背景图片,各种按钮已经写好。一般我们按钮用a标签来展示,然后可能跳转到href属性里的路径中。
但是
如果按照传统的想法继续进行开发。首先我们得需要好多的html。并且每个页面中如果有同样的部分,比如上导航栏以及Footer部分。我们几乎每个页面都要有。而他们都是组件,他们的样式以及HTML都是写在组件文件夹的.vue文件中。如果要使用多个html进行注册,登录的跳转显然不够好。引入vue-router插件。我们想进行单页开发,只用一个html,其他都用组件解决。
vue-routet
1.首先,在src文件夹下创建一个新的文件夹:router。然后新建js文件:index.js。
2.在js文件中
import Vue from 'vue'
import Router from 'vue-router'
//引入组件
import Landing from '../components/Landing.vue'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
Vue.use(Router);
export default new Router({
mode:'history',
linkActiveClass:"active",
routes:[
{path:"*",redirect:"/"},
{path:"/",component:Landing},
{path:"/login",component:Login},
{path:"/register",component:Register}
]
})
(1)引入vue以及router路由
(2)引入组件,我们想到,需要进行变化的是中间的部分,也就是我们想要点击注册,landing.vue变成register.vue并且展示对应的注册组件。
(3)Vue.use(Router)使用路由
(4)“抛出”Router。
(5)当/为路径时,即是默认。为Landing,当router-link标签to属性为/login时,展示登录.vue
这么介绍和记录有点不太难表达关于vue-rouer插件的魅力。
指路=》》》》》》》》》》》》》https://blog.csdn.net/wulala_hei/article/details/80488727。这篇博客详细地介绍了关于vue-rouer。我只记录下如何使用。后续再继续对vue单页开发进一步研究。
使用
首先在App.vue中
<keep-alive>
<router-view></router-view>
</keep-alive>
哪里要用呢。上导航栏的注册登录。
好,接着来到NavBar.vue中
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<router-link class="nav-link" to="/Login">
登录
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/Register">
注册
</router-link>
</li>
</ul>
router-link标签,to属性。类似于a标签和href。也就是当我们点击的时候url后面会被加上/login。前面我们已经配置过,当结尾是/login时则展示跳转组件。这样我们就可以成功进行单页开发。不需要跳转新的html。我们只用了一个html。那个HTML在前面介绍过。引入了各种框架的css,js。bootstrap等。因为我们想要的按钮可以直接btn btn-lg btn-info 来改变按钮样式等等。
效果
路由使用起来还是比较简单。但是进一步了解还需要参考前辈的博客经验等等。