今天复习了vue路由器的基本使用,vue路由器是搭建vue项目必备的技能,故将其记录下来,供以后查阅。
1、在src文件夹中创建一个router文件夹,下面新建一个index.js文件。
import VueRouter from 'vue-router' //引入插件
//在用vue-router前要先安装vue-router,npm install vue-router --save @3,
//如果用的是vue2,这里要加@3,因为不加的话,会默认安装vue3对应的4版本
Vue.use(VueRouter) //应用插件VueRouter
import Home from '@/pages/Home'
import Search from '@/pages/Search'
export default new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/search',
component:Search
},
//后面是路由重定向,当用户输入的是/,自动定向到/home路径
{
path:'/',
redirect:"/home"
}
]
})
上面的代码也可以这样写,先不引入组件,在component中引入:
import VueRouter from 'vue-router' //引入插件
Vue.use(VueRouter) //应用插件VueRouter
export default new VueRouter({
routes:[
{
path:'/home',
component:()=>import('@/pages/Home')
},
{
path:'/search',
component:()=>import('@/pages/Search')
}
]
})
2、在App.vue根组件中,引入这2个路由显示。
模板中:
<template>
<!-- 路由组件出口,显示路由对应的组件视图 -->
<router-view></router-view>
</template>
3、main.js中,新建vue实例时注册路由信息
import router from '@/router/index'
new Vue({
render:h=>h(App),
//注册路由信息,组件身上都拥有了$route和$router属性
router
}).$mount('#app')
$route:一般获取路由信息(路径path、query、params等)
$router:一般进行编程式导航路由跳转(push、replace)