vue路由的基础用法
1 .安装
npm install vue-router --save
2 .main.js中
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import BYHome from './components/BYHome.vue'
import BYNews from './components/BYNews.vue'
import HelloWorld from './components/HelloWorld.vue'
const routes = [
{path: '/home', component: BYHome},
{path: '/news', component: BYNews},
{path: '/helloworld', component: HelloWorld},
{path: '*', redirect: '/home'}
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
<router-view></router-view>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/helloworld">helloWorld</router-link>
路由的跳转方式
第一种跳转方式:编程式导航
{path: '/news', component: BYNews},
this.$router.push({path:'news'});
{path: '/newDetail/:aid', component: BYNewDetail},
this.$router.push({path:'/newDetail/495'});
第二种跳转方式:命名路由
{path: '/news', component: BYNews,name:'news'},
this.$router.push({name:'news'});
this.$router.push({name:'news',params:{userId:123}});
路由模式
路由的hash模式以及history模式:
默认是hash模式,路由上方的路径是用#表示
http://localhost:8080/#/news
可以将hash模式改为history模式,路由上方的路径就没有了
路由的嵌套
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}
]
},