vue路由，路由传参

路由的基本用法

第一步 安装路由

npm install vue-router --save

在min.js中引入

//Vue路由：引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//Vue路由：引入并创建组件
import Home from './components/Home.vue'
import List './components/List.vue'
import HelloWorld from './components/HelloWorld.vue'

//Vue路由：配置路由
const routes = [
  {path: '/home', component: Home},
  {path: '/list', component: List},
  {path: '/helloworld', component: HelloWorld},
  {path: '*', redirect: '/home'} /*默认跳转路由 */
]

//Vue路由：实例化VueRouter 
const router = new VueRouter({
  routes //缩写，相当于 routes:routes
})

new Vue({
  router, //Vue路由：挂载路由
  render: h => h(App),
}).$mount('#app')

//Vue路由：根组件的模板里面放上下面这句话，需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中
<router-view></router-view>

//路由跳转
<router-link to="/home">首页</router-link>  
<router-link to="/list">新闻</router-link>
<router-link to="/helloworld">helloWorld</router-link>

路由的嵌套

User.vue页面中有两个子页面
UserAdd.vue
UserList.vue

//路由的配置
import BYUser from '../BYUser.vue'
import UserAdd from '../User/UserAdd.vue'
import UserList from '../User/UserList.vue'

{path: '/user' , component:BYUser,
children:[
  {path: 'useradd',component:UserAdd},
  {path: 'userlist',component:UserList}
]
},

//路由的跳转
<div>
<div class="left">
    <ul>
        <li>
            <router-link to="/user/useradd"> 增加用户 </router-link>
        </li>
        <li>
             <router-link to="/user/userlist"> 用户列表 </router-link>
        </li>
    </ul>
</div>
<div class="right">
    <router-view></router-view>
</div>
</div>