Vue路由基础

Posted 2022-02-18 tractors

Vue路由

　　功能就是在不重新请求页面的情况下，更新页面视图；

一、安装：

 

　　1）cnpm install vue-router -s

　　2）依赖：cnpm install

二、设计路由界面：

　　创建components文件夹，文件夹内分别创建user、Home组件

*user.vue*
<template>
<div>user</div>
</template>

*Home.vue*
<template>
<div>Home</div>
</template>

三、创建静态路由表：

　　在src下创建routes.js

import Home from ‘@/components/Home.vue‘
import User from ‘@/components/user/user.vue‘
 
export const routes = [
        path:‘/‘,component:Home,
        path:‘/user‘,component:User
]

四、引入路由模块并使用：

　　在main.js中引入路由模块并使用

import Vue from ‘vue‘
import App from ‘./App.vue‘
import VueRouter from ‘vue-router‘ //1.引入路由模块
import routes from ‘./routes‘        //2.引入静态路由表
 
Vue.use(VueRouter); //3.使用路由模块
 
//4.创建一个VueRouter模块的实例
const router = new VueRouter(
        routes:routes
);
 
new Vue(
  el: ‘#app‘,
  router,//5.把router实例放入到vue实例中
  render: h => h(App)
)

五、路由使用：

　　在App.vue中：

 

<template>
  <div class="container">
                <div class="row">
                        <div class="col-xs-12 col-sm-8">
                                <h1>Routing</h1>
                                <router-view></router-view>
                        </div>
                </div>
        </div>
</template>

 

六、路由跳转实现两种方式：

　　1）通过html中的<router-link to="路由地址">标签实现：

<template>
  <div>
    <div>
      <span><router-link to="/home">首页</router-link></span>
      <span><router-link to="/products">商品</router-link></span>
    </div>
    <router-view></router-view>
  </div>
</template>

　　2）通过js实现：

this.$router.push("/Products/1");

　　　　//this指向问题：使用箭头函数；

 

this.axios(
    method: ‘get‘,
    url: ‘‘
).then(function(resp)
    //无法找到本组件；
    console.log(this);
    this.$router.push("/home");
)
this.axios(
    method: ‘get‘,
    url: ‘‘
).then((resp)=>
    console.log(this);
    this.$router.push("/home");
)

 

七、参数传递：

　　1）设置参数：router.js

export const routes = [
        path:‘/‘,component:Home,
        path:‘/user/:id‘,component:User
]

　　2）传递参数：

 

<router-link to="/products/123">商品</router-link>

 

　　3）接收参数：

 

<script>
    export default 
      name: "products",
      data()
          return
            id:this.$route.params.id
          
      
    
</script>