【vuejs路由】vuejs 路由基础入门实战操作详细指南

框架

浏览数:1,229

2017-12-11

官方文档

https://router.vuejs.org/zh-cn/

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

hash 和 history模式

默认hash模式:

以#/开始匹配,这种叫作哈希模式(hash)

HTML5 History 模式:

/开始,就是我们常见的方式没有 # 符号

    首页
    工作

我们此时使用a标签来切换比较麻烦,每次更改路由模式的时候,需要单独改a标签里面herf的链接

在vue里面提供了一个更好的方式,来解决这个问题

   home主页
    我的工作

<router-view/>

每次切换路由的时候,里面的内容都依靠 来显示在页面上
只有页面有导航的地方,打算让组件显示在页面上,必须写这个标签


router-link 默认解析成a标签

home主页
我的工作

给导航添加激活样式

通过css里面设置

.router-link-active{
    background-color:red
}

当我们单独设置激活样式的时候,根路由 / 永远都会匹配到样式

我们可以在标签中添加 exact 方式来解决永远都会匹配到跟路径样式问题

    直接加在标签属性上
    home主页

我们自己来给导航添加自定义class名字

通过 设置 active-class属性值 改变默认的激活样式类

    我的工作

统一更改激活样式

在 router/index.js里面设置 linkExactActiveClass属性

export default new Router({
    // mode: 'history',
    mode: 'hash',
    linkExactActiveClass: 'shudong', //通过设置这个属性值,给所有的激活样式,添加统一的类


当我们统一设置后,每次激活的路由标签,都带着自己设置的这个shudong类
我的工作

使用属性 tag 统一更改路由编译后的标签名字 -> <li> </li>

默认编译的标签名字是 a

    我的Stark

更改完后的dom

路由嵌套 chidren

使用方式

        {
            path: '/about',  // 这是一级路由
            component: About,
            children: [{  // 里面是嵌套路由
                    path: 'blog',  //如果在这个嵌套
                    name: 'blog',
                    component: Blog
                },
                {
                    path: '/info',
                    name: 'info',
                    component: Info
                }
            ]
        }

如果在这个嵌套里面的path:” 留空,默认会显示这个组件

http://localhost:8080/#/about
此时会把 这个默认留空的嵌套路由组件显示出来,也就是上面的blog 组件显示出来 

如果嵌套路由里面的path:’blog’ 写具体的路由,则访问的时候必须匹配

必须是这个路由精准匹配

http://localhost:8080/#/about/blog

这样才会把这个blog嵌套路由组件显示出来

以 / 开头的嵌套路径会被当作根路径。

这让你充分的使用嵌套组件而无须设置嵌套的路径。

            {
            path: '/about',  // 这是一级路由
            component: About,
            children: [{  // 里面是嵌套路由
                    path: 'blog',  //如果在这个嵌套
                    name: 'blog',
                    component: Blog
                },
                {
                    path: '/info', // 以 / 开头的嵌套路径会被当作跟路径
                    name: 'info',
                    component: Info
                }
            ]
        }

    访问方式:
    http://localhost:8080/#/info

如果去掉/ 此时去掉了 ‘/info’ -> ‘info’

        {
            path: '/about',  // 这是一级路由
            component: About,
            children: [{  // 里面是嵌套路由
                    path: 'blog',  //如果在这个嵌套
                    name: 'blog',
                    component: Blog
                },
                {
                    path: 'info', // 此时去掉了 '/info'  -> 'info'
                    name: 'info',
                    component: Info
                }
            ]
        }

      访问方式:
    http://localhost:8080/#/about/info

你会发现,children 配置就是像 routes 配置一样的路由配置数组,所以呢,你可以嵌套多层路由。

此时,基于上面的配置,当你访问 /about/info 时,about 的出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。

重定向

使用方式 path:’*’

这个 * 是匹配上面没有找到的路径,会到这里
可以直接写:component: NotFound,

redirect 这是一个函数,里面有参数 to
to 打印出来是一个对象
{name: undefined, meta: {…}, path: “/aaa”, hash: “”, query: {…}, …}

通过 to.path 可以获取当前用户访问的路径,来写一些逻辑跳转下面是使用详细方式

{
    path: '*',
    // component: NotFound,
    redirect: (to) => {
        console.log(to);
        if (to.path === '/aaa') {
            return '/work'
        } else if (to.path === '/bbb') {
            return '/info'
        } else {
            return '/'
        }
    }
}

最后附上所有路由文件代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Work from '@/components/Work'
import Stark from '@/components/Stark'

Vue.use(Router)
const UserProfile = { template: `
我是profile 组件
` }; const UserPosts = { template: `
我是UserPosts 组件
` }; const Blog = { template: `
我是Blog 组件
` }; const Info = { template: `
我是Info 组件
` }; const NotFound = { template: `
404 您访问的页面不存在
` }; const About = { template: `
我是About组件 <router-view> </router-view>
` }; const User = { // template: '
User {{ $route.params.id }}
' template: '
\

User {{ $route.params.id } }

\ <router-view> </router-view> \
' } export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', routes: [{ path: '/', name: 'Hello', component: HelloWorld }, { path: '/work', name: 'Work', component: Work }, { path: '/stark', name: 'stark', component: Stark }, // { path: '/user/:id', component: User } { path: '/user/:id', component: User, children: [{ // 当 /user/:id/profile 匹配成功, // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] }, { path: '/about', component: About, children: [{ path: 'blog', name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }, { path: '*', // component: NotFound, redirect: (to) => { console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } } } ] })

路由传参

传一个参数

在路由里面的path:'/user/:stark'   这个冒号后面跟的字符串相当于 key 
在组件里面使用 this.$route.params.stark 来获取这个value的值
访问方式:

http://localhost:8080/#/user/wang

wang 就是console.log(this.$route.params.stark) 值

在后面跟 ?号
可以 写wang 或不写 后面的参数
如果不跟?号 ,必须写这个参数

如果想传多个参数

在路由里面添加多个key
path: '/user/:stark?/:name?

访问方式
http://localhost:8080/#/user/wang/stark

打印结果 console.log(this.$route.params)
{stark: "wang", name: "shudong"}
  {
    path: '/user/:stark?/:name?',
    name: 'user',
    component: User
},

案例:

user 组件

 

 

路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Work from '@/components/Work'
import Stark from '@/components/Stark'
import User from '@/components/User'

Vue.use(Router)
const UserProfile = { template: `
我是profile 组件
` }; const UserPosts = { template: `
我是UserPosts 组件
` }; const Blog = { template: `
我是Blog 组件
` }; const Info = { template: `
我是Info 组件
` }; const NotFound = { template: `
404 您访问的页面不存在
` }; const About = { template: `
我是About组件
` }; const Users = { // template: '
User {{ $route.params.id }}
' template: '
\

User {{ $route.params.id } }

\ <router-view> </router-view> \
' } export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', routes: [{ path: '/', name: 'Hello', component: HelloWorld }, { path: '/work', name: 'Work', component: Work }, { path: '/user/:userId?/:name?', name: 'user', component: User }, { path: '/stark', name: 'stark', component: Stark }, // { path: '/user/:id', component: User } { path: '/users/:id', component: Users, children: [{ // 当 /user/:id/profile 匹配成功, // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] }, { path: '/about', component: About, children: [{ path: 'blog', name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }, { path: '*', // component: NotFound, redirect: (to) => { // console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } } } ] })

原文地址:https://segmentfault.com/a/1190000011612365