前端路由: 在web开发中,路由是指根据url分配到对应的处理程序
vue-router: 通过管理url实现url和组件的对应和通过url进行组件之间的切换
可以做单页面应用(SPA):加载单个HTML页面,并在用户与应用程序交互时动态更新该页面
vue-router的使用步骤:
1、npm install vue-router--save //(安装模块)
2、import VueRouter from 'vue-router' //(引入模块)
3、Vue.use(VueRouter); // 作为Vue的插件
4、new VueRouter({
//配置参数
}) //(创建路由实例对象)
5、new Vue({router}) //注入Vue选项参数
6、<router-view></router-view>//告诉路由渲染的位置
在文件src/main.js文件中输入:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './common/index.sass'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//这里的属性router跟路由实例的名字刚好重名,可以直接写成这样就可以了
template: '<App/>',
components: { App }
})
在文件src/router/index.js文件中输入:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routes = [
{
path: '/',
component: mainContent
},
{
/* 网站管理 */
path: '/web_manager',
name: 'webManager',
component: mainContent,
children: [
/* seo优化 */
{
name: 'optimizeSeo',
path: 'optimize_seo',
component: optimizeSeo
},
/* 常规logo */
{
name: 'commonLogo',
path: 'common_logo',
component: commonLogoPage
},
{
path: '/404',
name: 'notFound',
component: notFoundPage
},
{
path: '*',
component: notFoundPage
}
]
}]
let router = new Router({
mode: 'history',
linkActiveClass: 'active',
routes
})
export default router
以上代码就是vue-router的基本使用