1.安装
2.使用
3.router几个用法
一 安装
npm安装
npm install vue-router
二 使用
1.绑定vue对象
2.异步加载组件 component: () => import('../views/mysetting/person')
<script> import Vue from 'vue' import Router from 'vue-router' import login from '../views/login' Vue.use(Router) export default new Router({ routes: [ { path: '/login', name: 'login', component: login } ] }) </script>
// 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' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '../views/login'
import index from '../views/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/',
redirect: '/index',
name: 'index',
component: index
},
{
path: '/index',
name: 'index',
component: index,
children: [
{
path: '/person/:id',
name: 'person',
component: () => import('../views/mysetting/person'),
},
{
path: '/department',
name: 'department',
component: () => import('../views/mysetting/department'),
}
]
}
]
})
二 router几个用法
1.跳转页面:router-view router-link
<router-view></router-view>
<router-link to="/login">登录页面</router-link>
2.重定向:redirect
{
path: '/',
redirect: '/login',
component: login
}
3.嵌套路由:children
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '../views/login'
import index from '../views/index'
import person from '../views/mysetting/person'
import department from '../views/mysetting/department'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/',
redirect:'/index',
name: 'index',
component: index
},
{
path: '/index',
name: 'index',
component: index,
children:[
{
path: '/person/:id',
name: 'person',
component: person,
},
{
path: '/department',
name: 'department',
component: department,
}
]
}
]
})
4.命令路由:name
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: login
}
]
})
<!--<router-link to="/person/123">个人信息</router-link>--> <router-link :to="{name:'person', params: { id: 123 }}">个人信息</router-link>
5.js导航
<el-button @click="gotoRouter('/person/123')">跳转</el-button>
<el-button @click="gotoRouter2('/person/123')">跳转</el-button>
<el-button @click="gotoRouter3('person',123)">跳转</el-button>
<el-button @click="gotoRouter4('person',123)">跳转</el-button>
gotoRouter(path){
this.$router.push(path) //字符串 http://localhost:8080/#/person/123
},
gotoRouter2(path){
this.$router.push({path:path}) //对象 http://localhost:8080/#/person/123
},
gotoRouter3(name,id){
this.$router.push({name:'person',params:{id:123}}) //命令路由 http://localhost:8080/#/person/123
},
gotoRouter4(name,id){
this.$router.push({path:'person',query:{id:123}}) //带参数查询 对应:http://localhost:8080/#/person?id=123
}