vue-router各种路由笔记

#前端路由
前端页面根据不同路由显示不同的内容和页面，通过组件构建的单页面
优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：不利于SEO，使用浏览器的前进后退的时候会重新发送请求，没有合理地利用缓存，单页面无法记住之前滚动的位置
#后端路由
服务器根据url的不同返回不同的页面

#vue-router用来构建SPA
#<router-link></router-link>或者this.$router.push({path:''})
#<router-view></router-view>

#动态路由
/user/:username
/user/:username/number/:number
#可以使用$route.params.username获取

// 建一个.vue页面作为组件，script中的js代码需要export default{}
// 在router文件夹中的index.js文件中引入这个页面
import 组件名 from 'xx/xx' 
// 在下面的routes数组中修改
{
    // mode: 'history', // 不设这个的话，默认是哈希，也就是路由为：/#/user/:username
    path: '/xx/:参数',// 地址栏什么情况下显示这个页面
    name: 'xx',
    component: 引入的组件名
}
// 那么只要你在地址栏输入正确的路径，那么就可以显示这个组件

#嵌套路由
// 建多个.vue作为子组件，
// 在router文件夹中的index.js文件中引入这些页面
import 组件名 from 'xx/xx' 
// 在下面的routes数组中修改
{
    path: '/fu',// 地址栏什么情况下显示这个页面
    name: 'xx',
    component: 父组件名,
    children: [
        {
            path: 'zi', // 不要写成/zi，/代表一级路由，也就是说/fu/zi无法访问到
            name: 'xx',
            component: 引入的子组件名
        }
    ]
}
// 返回到父组件的文件
// 使用<router-view></router-view>，App.vue的router-view标签是提供给一级路由的
<router-link to="/fu/zi">第一个子组件</router-link>
<router-link to="/fu/anotherZi">第二个子组件</router-link>
<div>
    <router-view></router-view>
</div>
// 这样点击链接就会在router-view中显示子组件

#编程式路由，通过js来实现页面的跳转
# $router.push("name")
# $router.push({path:"name"})
# $router.push({path:"name?a=123"}) 或者 $router.push({path:"name",query:{a:123}});
# $router.go(1) // 倒退1步
// 获取地址栏的参数需要用到 $route.query.a

// 首先你需要在router/index.js中定义好你需要跳转的页面
// 第一种方法
// 然后使用
<router-link to="/tiaozhuan">跳转到其它页面</router-link>

// 第二种方法
<button @click="jump">跳转到其它页面</button>
// 然后在methods中添加这个函数
methods: {
    jump() {
        this.$router.push("/tiaozhuan");
        // 或者使用上面的任何一种方法都可以
    }
}

#命名路由和命名视图
#给路由定义不同的名字，根据名字进行匹配
{
    path: '/xx',
    name: 'xx', // 也就是这个路由名字进行跳转
    component: xx,
    children: [
        {
            ...
        }
    ]
}
#给不同的router-view定义名字，通过名字进行对应组件的渲染
<router-link v-bind:to="｛name:'路由name的值'｝">跳转到其它页面</router-link>
#如果是动态路由
{
    path: '/xx/:参数', // 动态路由
    name: 'xx', // 也就是这个路由名字进行跳转
    component: xx
}
<router-link v-bind:to="｛name:'路由name的值', params:{参数: 参数值｝">跳转到其它页面</router-link>

#命名视图，为router-view定义不同的name值
<router-view></router-view> // 不设name直接渲染路由为'/'的组件
<router-view name='zhujian1'></router-view>
<router-view name='zhujian2'></router-view>
{
    path: '/xx/:参数', // 动态路由
    name: 'xx', // 也就是这个路由名字进行跳转
    components: {
        default: '引入的组件名',
        zhujian1: '引入的组件名',
        zhujian2: '引入的组件名'
    }
}