标签：import new 效果 http child ref sys 目标 org
在模块项目中下载 vue-router 执行命令
npm install vue-router
cnpm install --save vue-router
创建 vue-router 和使用
文件结构: 项目 --> src --> router --> index.js
index.js
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import Home from ‘../views/Home.vue‘ Vue.use(VueRouter) const routes = [ { path: ‘/‘, name: ‘Home‘, component: Home, children:[ { path: ‘play‘, name: ‘Play‘, component: Play, } ] }, { path: ‘/about‘, name: ‘About‘, component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue‘) }, { path: ‘*‘, redirect: ‘Home‘ }, ] const router = new VueRouter({ mode: ‘history‘, routes }) export default router
routers
-- path 路由路径
-- name 路由名称
-- component 组件
-- redirect 重定向到组件
-- children 二级路由，跟一级路由相同结构
router
-- mode 默认hash，URL改变时，页面不会重新加载；history 看起来像正常的url，但是需要配置好后台
-- routers 路由数组
使用配置好的路由
import Vue from ‘vue‘ import Router from ‘./router‘ Vue.use(Router)
路由容器
<router-view></router-view>
动态路由
{ name: ‘detail‘, path:‘/detail/:id‘, //动态路由，可以后面跟参数，如(‘/detail/123‘) component: Detail }
-- 获取动态路由的参数(id) $route.params.id;
-- 声明式导航 <router-link to="/home" tag="li" activeClass="myactive"></router-link>
-- 编程式导航
-- 路径跳转 $router.push(‘/detail/123‘) //带参数跳转路由
-- 名字跳转 $router.push({name:‘kerwindetail‘, params:{id: 1}}) //带参数跳转路由
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } }
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。
标签：import new 效果 http child ref sys 目标 org
原文地址：https://www.cnblogs.com/DepthCh/p/12487702.html
