vue路由-router
VueRouter基础
vue路由的注册
-
导入
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下载之后的 <script src="vue.min.js"></script> <script src="vue-router.js"></script>
-
定义一个匹配规则对象
let url=[ { path: "/", component: { template:`<div><h1>组件</h1></div>` } } ]
-
实例化VueRouter对象,并把匹配规则注册进去
let router = new VueRouter({ routes: url });
-
把VueRouter实例化对象注册Vue的根实例中
const app = new Vue({ el: "#app", router : router })
-
在div标签中直接调用就可以了
<!--4 直接写router-link标签就--> <router-link to="/">首页</router-link> <router-link to="course">课程</router-link> <router-view></router-view>
路由的命名
-
路由的参数name和调用this.$route.params.name
-
let url = [{ path: "/user/:name", name : 'user', component: { template: `<div><h1>这是{{this.$route.params.name}}页面</h1></div>`, mounted(){ console.log(this.$route) } } }]
-
调用
<div id="app"> <router-link :to="/">主页</router-link> <router-link :to="{name: 'login'}">登陆</router-link> <router-link :to="{name: 'user', params: {name: 'ruizhiling'}}">角色</router-link> <router-view></router-view> </div>
-
注意to一定动态绑定
手动路由
- 在url中通过写按钮的方式对其进行跳转
路由的参数
路由的钩子函数
-
-- beforeEach(function(to, from, next){ to 你要去哪里 from 你从哪里来 next 你接下来要做什么 }) -- afterEach(function(to, from){ to 你要去哪里 from 你从哪里来 })
命名的路由视图
- 一个路由对应多个组件
- div中写法
Vue的生命周期
-
图示
流程图
new Vue --> 监听数据 --> 初始化事件 --> 找el --> template --> 编译形成虚拟DOM --> 渲染页面 -- 数据改变重新渲染页面 -- app.$destroy()