router(vueRouter使用redirect,alias

作者: 小棋子js | 来源:发表于2019-12-10 15:39 被阅读0次

router(vueRouter使用redirect,alias
VUE路由（1.router与route区别 2.路由跳转传参
vue2 & vue3 router keepalive 的使
vue-router
Vue router中alias和redirect的区别
去掉井号
vue cli4打包不出现东西，或者空白
路由 vue-router
vue路由：2019-05-17
VUE路由初始化 Cannot read property '$

一个简单的例子

 <div id="app">
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
            <router-view></router-view>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <script> 
    const Foo = {template: `<div>Foo</div>`}
    const Bar = {template: `<div>Bar</div>`}
    const routes = [
                {path: '/foo', component: Foo},
                {path: '/bar', component: Bar}
            ]
    const router = new VueRouter({
        routes
    })
    new Vue({
        router,
        el: '#app',
        mounted () {
            console.log(this.$route)
            console.log(this.$router)
        }
    }) 
</script>

动态路由匹配

路由参数

<router-link to="/foo/999">Go to Foo</router-link>
{path: '/foo/:id', component: Foo}
this.$route.params.id
// ==> 999

路由参数变化监视
watch:{
'$route'(to, from) {}
}
beforeRouteUpdate (to, from, next) {}

嵌套路由

const User = {
    template: `<div>User: <router-link to="/one">Go to one</router-link>
    <router-link to="/two">Go to two</router-link>
    <router-view></router-view></div>`,
}
const One = {template: `<div>One</div>`}
const Two = {template: `<div>Two</div>`}
const routes = [
    {
        path: '/user',
        component: User,
        children: [
            {path: '/one', component: One},
            {path: '/two', component: Two},
        ]
    },
]

命名路由

{path: '/bar/:id', component: Bar, name: 'newbar'} 
声明式 <router-link :to="{ name: 'newBar', params: { id: 123 }}">bar</router-link> 
编程式 this.$router.push({ name: 'newBar', params: { id: 123 }})
编程式导航
this.$router.push('/bar')
//字符串
this.$router.push({path: '/bar'})
//对象
this.$router.push({path: '/bar/123'})
// 完整路径   /bar/123
this.$router.push({ name: 'newbar', params: { id: 123 }})
// 命名的路由   /bar/123
this.$router.push({ path: 'bar', query: { plan: 'private' }})
// 带查询参数，变成 /bar?plan=private
this.$router.go(n)
// 在 history 记录中向前或者后退n步

命名视图（可根据名字显示视图）

<router-view></router-view>
<router-view name="one"></router-view> 
const One = {template: `<div>One</div>`}
const Default= {template: `<div>Default</div>`}
const routes = [
    {
      path: '/',
      components: {
        default: Default,
        one: One
      }
    }
  ]

重定向: redirect

第一种

通过redirect

routes: [
    {
        path: '*',
        component: undefined
    }
]

routes: [
    {
        path: '/home',
        redirect: '/home'
    }
]

第二种

通过redirect - 路由重定向,值得注意的是：当前这个undefined必须是你在上面配置过的地址

routes: [
    {
        path: '/undefined',
        component: undefined
    },
    {
        path: '*',
        redirect: 'undefined' //上面配置过，后面才能用
    }
]

当前方式你还能这么写

routes: [
    {
        path: '/undefined',
        component: undefined
    },
    {
       path: '*',
       redirect:{path:'/undefined'}
    }
]

第三种

对象通过name别名写法，同样，还是通过上面配置过的路由地址进行跳转

routes: [
    {
      path: '/undefined',
      name: 'nofind',
      component: undefined,
      meta:{
        login:true,
        title:'undefined'
      }
    },
    {
       path: '*',
       redirect:{name:'nofind'}
    }
]

第四种

动态设置重定向目标

routes: [
    {
      path: '/undefined',
      name: 'nofind',
      component: undefined,
      meta:{
        login:true,
        title:'undefined'
      }
    },
   {
    path: '*',
    redirect:(to) => {
        /*console.log(to) //to，目标路由对象，当前访问的目标路由信息
        return '/undefined'//重定向到一个上面配置过的路由地址*/

        //当然，既然说是动态设置，那么肯定不能向上述那样简简单单return完事，如下：
        if(to.path == '/abc'){
          return '/home' //如果目标路径是abc，那么我重定向到首页home
        }
        return '/undefined' //其他正常时候跳转到404
      }
   }
]

不仅仅只是上面这些方式，其实我们还有别的方式也可以进行跳转重定向，小伙伴，比如通过钩子函数

第五种

通过全局路由钩子函数去配置


// 路由钩子函数
//beforeEach即将要进某个路由时候
router.beforeEach((to, from, [next](http://www.php.net/next))=>{
  if(to.meta.login){
    [next](http://www.php.net/next)(true) //false时候阻止路由执行，默认是true
    // next('/login') 在这里判断到后去跳到登录页面，先要在路由里配置
    console.[log](http://www.php.net/log)("当前是个404组件，需要登录访问，
其实你还没有登录，不过看你可怜兮兮，我暂时让你旁观！")
  }else{
    [next](http://www.php.net/next)()
  }
})

//afterEach进入组件之后，当然，就没有next了，已经进入了组件
router.afterEach((to, from)=>{
  if(to.meta.title){
    //当进入了组件后，如果meta里有title就设置title(注意，这个位置document前面需要加上window才能访问)
    window.document.title = to.meta.title;
  }else{
    window.document.title = '世上最完整的vue-router案例'
  }
})

第六种

通过局部路由钩子函数去配置

routes: [
    {
      path: '/document',
      name: 'document',
      components: { //多个组件渲染到一个路由(命名视图技术)
        default:document, //默认渲染到router-view没有name的路由
        slide:slide
      },
      beforeEnter(to,from,[next](http://www.php.net/next)){
        //局部路由钩子函数同样有beforeEnter/afterEnter，to可以监听即将到达的路由信息
        console.[log](http://www.php.net/log)("路由钩子函数监听到：进入到document组件")
        [next](http://www.php.net/next)(true)
      }
    }
]

通过上面这么多的方式，你基本上可以胜任绝大多数vue.js项目路由重定向需求

别名: alias
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

const router = new VueRouter({
                routes: [
                    { path: '/a', component: A, alias: '/b' }
                ]})

路由组件传值

const Foo = {
    template: `<div>Foo {{id}}</div>`,
    props: ['id']
        // this.$route.params.id
}
const routes = [
    {
        path: '/foo/:id',
        component: Foo,
        props: true
    }
] 
// 布尔 props: true/false
// 对象 props: {id: XXX}
// 函数 props: route => {
    return {
         id: route.parame.id  
    }      
}


**HTML5 History模式**
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

导航守卫

全局守卫
router.beforeEach((to, from, next) => {})
//进入路由前
router.beforeResolve(to, from, next) => {})
//组件守卫和异步路由守卫解析
router.afterEach(to, from) => {})
//进入路由后
路由配置 routes数组对象里面配置
beforeEnter: (to, from, next) => {})
//相同路由触发一次

　　组件内的守卫
beforeRouteEnter (to, from, next) {}
// 进入导航之前 不能获取this
beforeRouteUpdate (to, from, next){}
// 组件复用,路由改变
beforeRouteLeave (to, from, next) {}
// 导航离开

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

导航A切换到导航B,先调用A组件内beforeRouteLeave,再调用全局beforeEach, 然后AB如果是重用组件则调用beforeRouterUpdate,否则调用路由配置中的beforeEnter,再调用B组件中的beforeRouteEnter,再调用全局的beforeResolve,最后调用全局afterEach

Vue - $router和$ route

本文目标在于区分两者，关于router的详细使用请参照官网https://router.vuejs.org/zh/

前言：this.$router其实是将Vue-Router注入到Vue实例的结果（vue.use()），从而避免每次使用都导入路由。

一. $router

Vue-Router中的router对象效仿了原生的history对象，用于控制路由跳转。

方法	描述
push()	往history 栈添加一个新的记录，实现跳转
replace()	换掉当前的 history 记录
go(n)	在 history 记录中向前或者后退n步

back(){
     this.$router.push({path:'/'});
},

二. $route

$route记录了当前路由信息

字段	描述
path	字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/book/news"
query	对象，表示 URL 查询参数。如果没有查询参数，则是个空对象。
params	对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
fullPath	完成解析后的 URL，包含查询参数和 hash 的完整路径
name	当前路径名字
meta	路由元信息
matched	数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
redirectedFrom	如果存在重定向，即为重定向来源的路由的名字
hash	当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

router(vueRouter使用redirect,alias
一个简单的例子动态路由匹配路由参数 Go to Foo<...
VUE路由（1.router与route区别 2.路由跳转传参
路由的基本使用可参考 Vue路由使用总结 1.router与route的区别 1.router是VueRouter...
vue2 & vue3 router keepalive 的使
vue2 router keep-alive的使用通过vueRouter 的meta 存放 keepAlive ...
vue-router
1. router 引入VueRouter Vue.use(VueRouter)定义 (路由) 组件 cons...
Vue router中alias和redirect的区别
redirect 点击进入后显示的url localhost:8080/#/index 显示的是重定向后的地址即i...
去掉井号
const router = new VueRouter({routes:[{path:"/",component...
vue cli4打包不出现东西，或者空白
const router = new VueRouter({ // mode: 'history', base...
路由 vue-router
this.$router和this.$route的区别是什么？ this.$router：VueRouter的实例...
vue路由：2019-05-17
1.动态路由参数： const router = new VueRouter({ routes: [ ...
VUE路由初始化 Cannot read property '$
//设置路由 const router =new VueRouter({ mode:'history', base...