vue 路由

路由：动态的往根组件挂载不同的组件

1. 安装vue-router

  npm install vue-router --save

2. 在mian.js 中引入并Vue.use('VueRouter')

import VueRouter from 'vue-router';
Vue.use(VueRouter);

3.配置路由
(1)创建组件，引入组件
(2)定义路由

const routes = [
 {path:'/foo', components:Foo},
  {path:'/bar', components:Bar}
]

(3）实例化VueRouter

const router = new VueRouter({
  routes //相当于routes：routes
});

(4)挂载

new Vue({
  el:'app',
  router,
  render: h => h(App)
})

(5) <router-view></router-view> 放在App.vue
如果需要使用链接跳转可以如下配置：

<router-link to='/home'>home</router-link>
<router-link to='/news'>news</router-link>

动态路由：可以传值的路由
第一种方法：

1. mian.js配置动态路由. :aid 就是需要传值，key就是aid

 {path:'/content/:aid', component:Content},//动态路由

2. 在传值的页面在link中配置

<ul>
    <li v-for='(item,key) in list'>
      <router-link :to="'/content/'+key">{{key}} ---  {{item}}</router-link>
    </li>
</ul>

3. 在对应的页面获取动态路由的值----$route.params

export  default{
        data(){
            return{
               msg:"detail msg"
            }
        },mounted(){
            console.log(this.$route.params);
        }
    }

第二种方法： 使用get的方式

1. main.js配置动态路由

import Pcontent from './components/Pcontent.vue';
const routes = [
   ...
  {path:'/pcontent', component:Pcontent},
  {path:'*', redirect:'/home'}//默认跳转的路由
];

2. 在传值页面配置

<ul>
            <li v-for='(item,key) in list'>
               <router-link :to="'/pcontent?aid='+key"> {{key}}---  {{item}}</router-link>
            </li>
        </ul>

3. 在取值页面取值

export  default{
        data(){
            return{
               msg:"detail msg"
            }
        },mounted(){
            //使用get传值
            console.log(this.$route.query);
        }
    }

路由的嵌套

1. main.js 配置路由

{
      path: '/user',
      component: User,
      children:[
        { path: 'useradd', component: UserAdd },
        { path: 'userlist', component: Userlist }
      ]
    }

2.父路由里面配置子路由显示的地方 <router-view></router-view>

路由模块化：
新建一个router.js

import Vue from 'vue';
//配置路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import User from '../components/User.vue';
//2.配置路由   注意：名字
const routes = [
    { path: '/home', component: Home },
    { path: '/news', component: News, name: 'news' },
    { path: '/user', component: User },
    { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
//3.实例化VueRouter  注意：名字
const router = new VueRouter({
    mode: 'history',   /*hash模式改为history*/
    routes // （缩写）相当于 routes: routes
})
//5 <router-view></router-view> 放在 App.vue
export default router;

将export的router，引入到main.js

import Vue from 'vue';
import App from './App.vue';
//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
import router from './router/router.js';
//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

以上就实现了router的分离，即路由模块化