vue-router2使用

vue-router是vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。

定义路由（routes.js）

路由懒加载

1
2
3
4
5
const Login = resolve => require(['./pages/login.vue'], resolve)

export const routes = [
  {path: '/', name: '登录', component: Login},
]

子路由

1
2
3
4
5
6
7
8
{path: '/main', name: '主页面', component: Main,
  children: [
    {path: '/', name: '', component: NewsList},
    {path: 'newsList', name: '新闻列表', component: NewsList},
    {path: 'newsAdd', name: '添加新闻', component: NewsAdd},
    {path: 'newsAdd/:id', name: '添加新闻', component: NewsAdd},
  ]
}

引入vue-router（main.js）

1
2
3
4
import Vue from 'vue'
import { routes } from './routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

使用vue-router

1
2
<router-link to='/'></router-link>
Js跳转：this.$router.push({path: '/' });
0%