一、不在初始化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
{
path:'list',
redirect:'list/01', //当访问 list 页面的时候,自动跳转到 list/01 页面
alias:'List', //可以使用list以及List路径访问该组件
component:newList
},
11、通配 URL,适用于404报错
{
path:'/404',
component:lost,
},
{
path:'*',
redirect:'/404'
}