基础路由
https://router.vuejs.org/zh/guide/
vue路由配置:
//0.安装
npm install vue-router --save / cnpm install vue-router --save
main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
//2.配置路由 注意:名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//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
//6、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
动态路由
1、配置动态路由
routes: [
// 动态路径参数 以冒号开头
{ path: '/content/:aid/:name', component: Content }, /*动态路由*/
{ path: '/pcontent', component: Pcontent },
]
2、在对应的页面
mounted(){
console.log(this.$route.params); /*获取动态路由传值*/
}
3、动态路由
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/content/'+key+'/'+item">{{key}}--{{item}}</router-link>
</li>
</ul>
-------
mounted(){
console.log(this.$route.params); /*获取动态路由传值*/
}
4、get传值
<ul>
<li v-for="(item,key) in pro_list">
<router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
</li>
</ul>
-----
mounted(){
console.log(this.$route.query); /*获取路由传值*/
}
编程式导航
<button @click="goNews()">通过js跳转到新闻页面</button>
goNews(){
// 注意:官方文档写错了
//第一种跳转方式 直接路由
// this.$router.push({ path: 'news' })
// this.$router.push({ path: '/content/495' });
//另一种跳转方式 利用别名
// { path: '/news', component: News,name:'news' },
// router.push({ name: 'news', params: { userId: 123 }})
this.$router.push({ name: 'news'})
}
路由嵌套
/*路由的嵌套
1.配置路由
{
path: '/user',
component: User,
children:[
{ path: 'useradd', component: UserAdd },
{ path: 'userlist', component: Userlist }
]
}
2.父路由里面配置子路由显示的地方 <router-view></router-view>
*/
<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>