路由的基本用法
第一步 安装路由
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>