Vue路由(router)

基本路由使用：

# 显示路由组件标签
<router-view></router-view>

<script>


// 定义登录组件
const login={
    template:`<div><h3>用户登录</h3></div>`
};


// 定义注册组件
const reg={
    template:`<div><h3>用户注册</h3></div>`
};

// 定义404组件
const notFound={
    template:`<div><h3>404 not found!</h3></div>`
};


// 创建路由规则对象
const router=new VueRouter({
    routes:[
        {path:"/", redirect:"/login"},    // 根路由，使用redirect重定向到login路由
        {path:"/login", component:login},
        {path:"/reg", component:reg},
        {path:"*", component:notFound}   // 这个路由必须放在路由规则最后面
    ]
});

const app=new Vue({
    el:"#app",
    data:{},
    ...
    router    //  router:router  注册路由
})



</script>

路由接口：

路径切换路由：根据请求路径切换显示不同组件

// 方式一 直接通过a标签进行切换路由连接
<a href="#/login">用户登录</a>   // #/ 哈希路由
<a href="#/reg">用户注册</a>


// 方式二 通过路由标签进行切换路由连接  标签必须加入to属性  to="路由路径"
<router-link to="/login">用户登录</router-link>
<router-link to="/reg">用户注册</router-link>


// 方式三 通过路由标签进行切换路由连接  传入路由对象
<router-link :to="{path:'/login'}">用户登录</router-link>    // v-bind 使用vue语法
<router-link :to="{path:'/reg'}">用户注册</router-link>

名称切换路由：根据路由对象名称切换路由显示不同组件 

注意：根据名称切换路由只能用router-link

//  通过名称切换路由  传入路由对象  推荐使用
<router-link :to="{name:'Login'}">用户登录</router-link>    // v-bind 使用vue语法
<router-link :to="{name:'Register'}">用户注册</router-link>

# 显示路由组件标签
<router-view></router-view>

<script>


// 定义登录组件
const login={
    template:`<div><h3>用户登录</h3></div>`
};


// 定义注册组件
const reg={
    template:`<div><h3>用户注册</h3></div>`
};

// 定义404组件
const notFound={
    template:`<div><h3>404 not found!</h3></div>`
};


// 创建路由规则对象
const router=new VueRouter({
    routes:[
        {path:"/", redirect:"/login"},    // 根路由，使用redirect重定向到login路由
        {path:"/login", component:login, name:"Login"},  // name：这个属性代表路由对象名称 用来给路由对象一个唯一标识
        {path:"/reg", component:reg, name:"Register"},
        {path:"*", component:notFound}   // 这个路由必须放在路由规则最后面
    ]
});

const app=new Vue({
    el:"#app",
    data:{},
    ...
    router    //  router:router  注册路由
})



</script>

js代码中切换路由：

点击某一个按钮后，实现业务逻辑后，跳转到指定路由

# 显示路由组件标签
<router-view></router-view>

<button @click="login">用户登录</button>

<script>


// 定义登录组件
const login={
    template:`<div><h3>用户登录</h3></div>`
};


// 定义注册组件
const reg={
    template:`<div><h3>用户注册</h3></div>`
};

// 定义404组件
const notFound={
    template:`<div><h3>404 not found!</h3></div>`
};


// 创建路由规则对象
const router=new VueRouter({
    routes:[
        {path:"/", redirect:"/login"},    // 根路由，使用redirect重定向到login路由
        {path:"/login", component:login, name:"Login"},  // name：这个属性代表路由对象名称 用来给路由对象一个唯一标识
        {path:"/reg", component:reg, name:"Register"},  // 当前路由路径指向哪里，哪里就是当前路由对象
        {path:"*", component:notFound}   // 这个路由必须放在路由规则最后面
    ]
});

const app=new Vue({
    el:"#app",
    data:{},
    methods:{
        login(){
            // 发送axios请求完成登录 响应回来之后切换路由到主页
            //this.$route object 当前路由对象 
            // this.$router vueRouter 代表路由器管理对象
             
            // this.$router.push('/login') // 路径切换
            // this.$router.push({path:"/login"}) // 路径切换
            this.$router.push({name:"Login"}) //使用名称切换 推荐(路径经常变动)
        }
    }
    ...
    router    //  router:router  注册路由
})



</script>

路由参数传递：

queryString方式传参：this.$route.query.key

//  通过名称切换路由  传入路由对象  推荐使用
<a to="#/login?name=xiaohua&pwd=222">用户登录</a>    //

//<router-link :to={path:"/login?name=xiaohua&pwd=222"}>用户登录</router-link>    //
//<router-link :to={path:"/login", query:{name:"xiaohua", pwd=222}}>用户登录</router-link>    //
//<router-link :to={name:"Login", query:{name:"xiaohua", pwd=222}>用户登录</router-link>    // 推荐

# 显示路由组件标签
<router-view></router-view>

<script>


// 定义登录组件
const login={
    template:`<div><h3>用户登录</h3></div>`
    created(){  // 生命周期中获取
        //this.$route  获取当前路由对象
        console.log( this.$route.query.name )  // 获取name参数
        console.log( this.$route.query.pwd)  
    }
};


// 定义注册组件
const reg={
    template:`<div><h3>用户注册</h3></div>`
};



// 创建路由规则对象
const router=new VueRouter({
    routes:[
        {path:"/login", component:login, name:"Login"},  
        {path:"/reg", component:reg, name:"Register"},
    ]
});

const app=new Vue({
    el:"#app",
    data:{},
    ...
    router    //  router:router  注册路由
})



</script>

restful 路径传递参数（/xxx/xx）：this.$route.params.key

//  通过名称切换路由  传入路由对象  推荐使用
<a to="#/login/01/xiaohua">用户登录</a>    //


//<router-link :to={name:"Login", params:{id:01, name=xiaohua}>用户登录</router-link>    // 推荐

# 显示路由组件标签
<router-view></router-view>

<script>


// 定义登录组件
const login={
    template:`<div><h3>用户登录</h3></div>`
    created(){  // 生命周期中获取
        //this.$route  获取当前路由对象
        console.log( this.$route.params.name )  // 获取name参数
        console.log( this.$route.params.pwd)  
    }
};


// 定义注册组件
const reg={
    template:`<div><h3>用户注册</h3></div>`
};



// 创建路由规则对象
const router=new VueRouter({
    routes:[
        {path:"/login", component:login, name:"Login"},  
        {path:"/reg", component:reg, name:"Register"},
    ]
});

const app=new Vue({
    el:"#app",
    data:{},
    ...
    router    //  router:router  注册路由
})



</script>

嵌套路由：

<a href="#/users/add">添加用户信息</a>   // 访问子路由，添加用户信息

# 显示路由组件标签
<router-view></router-view>

<script>


// 定义用户组件
const users={
    template:`<div><h3>用户列表</h3><router-view></router-view></div>`   // 在父template中展示子路由标签
};


// 定义添加用户组件
const add={
    template:`<div><h3>用户添加</h3></div>`
};



// 创建路由规则对象
const router=new VueRouter({
    routes:[
        {
            path:"/users", conponent:"users", name:"users",
                children:[   // 嵌套子组件路由 注意：嵌套路由中子路由不能以/开头
                {path:"add", conponent:"add", name:"add"}   // 访问子路由 /users/add
            ]
        }
    ]
});

const app=new Vue({
    el:"#app",
    data:{},
    ...
    router    //  router:router  注册路由
})



</script>