Vue——路由vueRouter

一、不在初始化vue的时候安装router的情况下

1、手动安装vue-router

npm i vue-router或者yarn add vue-router

2、在src文件夹中创建router文件夹

3、在router文件夹中创建index.js文件

4、在index.js文件中导入vue以及vue-router模块

import vue from 'vue';
import vueRouter from 'vue-router';

5、使用vue.use()注册vuerouter插件

vue.use(vueRouter);

6、导出vuerouter实例对象

import home from '@/view/Home'    //引入组件
import newList from '@/view/newlist'


export default new vueRouter({
    mode:'hash',                  //路由模式，使用hash，必须在路径前加入#才能访问，history模式不需要在地址栏中加入#，直接输入路由即可访问
    routes:[                      //路由的匹配规则，匹配组件
        {
            path:'/',             //路径
            component:home,       //需要配置的组件
        },
        {
            path:'/new',
            component:New,
            children:[            //配置在‘/new’下的子路径，必须在组件 New 中添加 <router-view /> 标签才能生效
                {
                    path:'list',
                    component:newList
                }
            ]
        }
    ]
})


---------------New 组件----------------------
<template>
    <div>
        <h1>新闻</h1>
        <router-view />            //设置路由切换容器
    </div>
</template>

<script>
</script>

<style>
</style>

7、在main.js入口文件中导入index.js路由文件，并在vue实例中加入router对象

import router from '@/router'  //在js中index.js文件名可以省略，相当于 import router from '@/router/index.js'

new Vue({
  el: '#app',
  router,                 //在实例中注册router
  components: { App },
  template: '<App/>'
})

8、在app.vue文件中添加路由容器

<template>
  <div id="app">
    <router-view />        //添加容器标签，把id=app的div设置为切换容器，指定路由在该div中切换，也就路径‘/’从这里开始计算
  </div>
</template>

9、动态根据 URL 匹配路由

{
    path:':id',// :id可以自定义名称，该属性动态匹配所有的url，在$route的params对象中可以访问到
    component:deteil
}

10、重定向路由 redirect ，以及URL别名 alias

扫描二维码关注公众号，回复： 4331592 查看本文章

{
    path:'list',
    redirect:'list/01',   //当访问 list 页面的时候，自动跳转到 list/01 页面
    alias:'List',         //可以使用list以及List路径访问该组件
    component:newList
},

11、通配 URL，适用于404报错

{
    path:'/404',
    component:lost,
},
{
    path:'*',
    redirect:'/404'
}

Vue——路由vueRouter

猜你喜欢