vue路由的，基本用法

第一步：安装路由

　　　　　　npm  install  router

 

第二步：新建路由，单独文件夹

　　　　　　1、最好新建router名称的文件夹，位置放在和pages一起

　　　　　　2、router文件夹下，新建index.js文件

 

第三步：引入需要的插件，和组件，（在刚新建的index文件里）

　　　　　　1、引入vue，和路由router（路由一定别忘了使用它）

import Vue from 'vue';
import VueRouter from 'vue-router';



Vue.use(VueRouter);

　　　　　　2、引入配置的组件

import LoginPage from '../pages/LoginPage';
import MainPage from '../pages/MainPage';
import WelcomePage from '../pages/WelcomePage';
import CategoryPage from '../pages/CategoryPage';
import BookPage from '../pages/BookPage';

 　　　　　　3、导出router模块

// 第一种写法：直接导出

export default new Router({
  routes: [
    { path: "/", component: LoginPage },
    { path: "/main", name: "main", component: MainPage }
    // {path: "/login", name: "loginLink", component: Login},
    // {path: "*", redirect: "/"}
  ]
});



// 第二种写法：变量赋值式

export default new VueRouter({
  routes
});

　　　　　　4、main.js里引入，router模块

import router from './router';

　　　　　　5、根组件，注册router模块

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

　　

第四步：（1）创建路由、（2）配置路由表

 　　　　

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', name: 'login', component: LoginPage },
  {
    path: '/main', component: MainPage, children: [
      { path: '', redirect: 'welcome' },
      { path: 'welcome', name: 'welcome', component: WelcomePage },
      { path: 'category', name: 'category', component: CategoryPage },
      { path: 'book', name: 'book', component: BookPage }
    ]
  },
  { path: '*', component: LoginPage }
];

 第五步：放置点击，触发路由跳转页面

    <router-link to="main">加载页</router-link>