vue路由的使用

路由的使用

1、配置路由文件
在Router.js中写

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Word from '@/components/Word';
Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Hello
        },
        {
            path:'/index',
            component:Word
        }
    ]
})

*1.route：由两部分组成，path和component. path 指路径，component 指的是组件
*2.’ / ’ 代表谁是首页，’ /index’访问的是index的路径
2.路由文件注入到main.js文件中

import Vue from 'vue';
import Router from 'vue-router';
import App from './App';
import router from './router/index';


Vue.config.productionTip = false;
new Vue({
    el: '#app',
    router,
    render(h){
        return h(App);
    }
})

二、路由跳转
路由的跳转使用标签router-link，这里相当于a标签
1.to的值传到 router.push()

//to是通过绑定数据到上面
<ul>
    <li><router-link to="/">Hello页面</router-link></li>
    <li><router-link :to="word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>
<script>
export default{
    name:'app',
    data(){
        return{
            word:'/word'
        }
    }
}
</script>

编程式：router.push(…)
方法一: this.$router.push({path:‘路径’)};

方法二：this.$router.push({name:‘组件名’)};
2.replace
调用 router.replace() ,导航后不会留下 history 记录

<router-link :to="{ path: '/abc'}" replace></router-link>

3.append
设置 append就是在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'a/b'}" append></router-link>

4.tag
使用tag可以使router-link转化成你想要的标签

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

三、子路由

<ul>
    <li><router-link to="/word/router1">路由1</router-link></li>
    <li><router-link to="/word/router2">路由2</router-link></li>
    <router-view></router-view>
</ul>

//路由的跳转
{
    path:'/word',
    component:Word,
    children:[
        {
            path:'router1',
            component:Router1
        },
        {
            path:'router2',
            component:Router2
        }
    ]
}

四、路由传参
1.查询字符串 给路由传递参数

<router-link to="/login?id=10">登录</router-link>

2.query传递参数

<li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">路由</router-link></li>