14. router

vue概述

一个单页面应用

通过dom的切换来修改页面

router

一个路由表，所有的vue页面必须在这里注册才能使用

router-link-exact-active精确匹配

router-link-active模糊匹配

方法的导入导出

- vue
  - 导出
    - export default
      - 不用{}指定名字
    - export function fn1(){}
      - 需要指定
  - 导入
    - import {...} from "./.../..."
    - import obj from "./..."

–save保存到当前目录

定义组件方式

• 首先新建文件，默认文件名为组件名字
• 然后定义好template，在export default中导出，定义好名字
• 接下来import进来，直接使用

vue主项目结构

首先是一个main.js是入口文件，程序通过这个文件进行打包

这个main.js导入了App.vue，还有vue模块，通过new的方式使用了App.vue和app标签绑定了#app的元素

App.vue通过export default的方式导出给main.js使用，所以我们要新增组件就是通过定义好vue文件，然后导入给vue，然后导出给main.js

router使用

导入router的包

npm install –save-dev vue-router

首先定义好router文件，然后导入vue和vue-router

接着用vue.use使用vueRouter

然后导出，用export defalut new VueRouter({

routes:[

]

})

传递参数

redirect:”/“

重定向

alias:

取别名

404

/*
写一个404页面
然后注册到路由里
写最后一个path："*"
*/

$router是路由实例

$router.back()//后退一步
$router.forword()//前进一步
$router.go(-2)//后退一步
#this.$router.push('页面路由')//跳转

$route