vue-router——路由配置及动态路由

vue-router是vue全家桶之一，对于构建单页面应用非常简单。

1. 引入方式
2. 路由配置
3. 动态路由
4. 动态路由参数获取

两种使用方式：

CDN引入：直接使用

NPM下载：需要配置

npm install vue-router -S // 或者 --save

通过插件形式安装（会自动给您配置好）：

vue add router

在vue-cli3.0中路由配置：（当然也可以在安装vue-cli时，勾选vue-router，脚手架会自动帮你配置好）

html的配置：

创建router.js文件，配置路由

//创建router.js文件
//引入vue和路由
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) 

//创建路由实例，配置路由
const router = new VueRouter({
    routes:[
        // 组件懒加载： {path: '/pathName', component: () => import('./path')} 访问到时才加载
        {path:'/pathName',component:componentName},
    ··· ···
    ]
});
//导出路由，挂载到Vue实例
export default router;

在main.js中，把路由挂载到根实例

//main.js文件
//引入创建的路由文件
import router from './router'
const vm = new Vue({
    router, //相当于router：router，ES6的简写，把路由挂载到根实例中，这样所有的组件都可以使用路由
    render:h=>h(App) //把组件App转化为虚拟dom
}).$mount('#app')

以上就是vue-router的配置，你也可以参照官方文档给出的一个详细的案例，自己配置下！有任何疑问欢迎留言！！！

 

命名视图

命名视图就是有多个router-view，如果 router-view 没有设置名字，那么默认为 default。

 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

 

动态路由

当不同的id对应相同组件时，你可以考虑用动态路由，动态路由就是在路由路径中 "使用动态录井参数"

实际业务中，经常会碰到下边场景，每一个列表对应的详情页板式一样，内容不同，你可以使用动态路由：

在路由配置中，需要添加动态路由的路径以冒号开头

const router = new VueRouter({
    routes:[
        {
            //这是一个可复用的组件
            path:'/detail/:id', //动态路由参数
            component:detail
        }
    ]
})

下边代码，   / detail / id1、  / detail / id2、  / detail / id3  所有的路径都将映射到同一组件（detail组件）

detail组件：

 

获取动态路由参数

动态路由的参数将会被设置到实例中的$route中的params里边，所以动态路由参数可以这样获取：

// 方法一： 
this.$route.params
// 方法二：在路由配置中添加props：true，在组件中，添加props: ['params'],通过this.params来获取
routes: {
    path: '/',
    props: true,
}

注意：

使用路由参数时，如：/detail/1 导航到 /detail/2 ，组件实例会被复用，因为两个路由都渲染了同一个组件，所以，组件的生命周期钩子将不会重复执行，但是比起销毁再创建，组件的复用性显的更加高效。

总结下：

经常犯的几个错误：

1、动态路由冒号前边的斜线未写！！！

{
    path:'/newsOne/:id',
    component:newsOne   
}

2、用 动态跳转时，to前边冒号未写！！！

3、下边写法，path后边的斜线未写！！！

跳转