Vue Learning Journey Part9: Uso de vue-router para lograr el enrutamiento front-end y el paso de parámetros

1. Concepto

1. Qué es el enrutamiento

En pocas palabras, el enrutamiento es la asignación de URL a función. La
URL visitada se asignará a la función correspondiente, y la función correspondiente decidirá qué devolver a esta URL. El
enrutamiento es un trabajo coincidente .

2. Enrutamiento back-end y enrutamiento front-end

• 1. Enrutamiento back-end:
  para los sitios web normales, todos los hipervínculos son direcciones URL. Todas las direcciones URL corresponden a los recursos correspondientes en el servidor.
  Cada recurso front-end corresponde a una dirección URL. El enrutamiento back-end distribuye el
  navegador en la barra de direcciones. cada vez que al cambiar diferentes url petición al servidor de servicios de fondo y responde el servidor a la solicitud pasa al archivo html mosaico de pantalla frontal en el fondo para devolver diferentes páginas
  que significa que el navegador se actualice la página final no se separa antes y después

• 2, el extremo delantero de la ruta:
  Para una sola página aplicación a través de la dirección URL de la almohadilla ( #logrado No.) de conmutación entre las diferentes páginas de la página no se actualiza
  ejemplo: www.xxx.com#/xxxeste formato
  al mismo tiempo tiene un hash característica: la solicitud HTTP no contiene el hash relevante El contenido es
  similar al concepto de un punto de anclaje . El
  navegador interpretará los caracteres que aparezcan después del primer # como un identificador de ubicación. Esto significa que estos caracteres no se enviarán al
  enrutamiento frontal del lado del servidor . Simplemente cambie el contenido después del # Sólo se destinará a la posición correspondiente no se recargue la web navegador solicita una página del servidor no es re

En una aplicación de una sola página, esta forma de cambiar las páginas a través de cambios hash se denomina enrutamiento front-end
(formando una diferencia del enrutamiento back- end , y el front-end es responsable del enrutamiento)

---

En segundo lugar, el uso básico

1. Introducción

vue-router es el administrador de enrutamiento oficial de Vue.js

Introducción al cdn:

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

vue-router depende de Vue, por lo que el orden de introducción de vue-router debe ser posterior a Vue

Cuando se importa el paquete vue-router, usará automáticamente la
dirección URL de enrutamiento de Hash y se agregará automáticamente después de:#/

2. Cree un objeto de regla de enrutamiento para definir las reglas de coincidencia de enrutamiento:

Cuando se importa el paquete vue-router, hay un constructor de ruta llamado VueRouter en el objeto global de la ventana

① new VueRouter()Cree un objeto de regla de enrutamiento y pase un objeto de configuración para el constructor cuando sea nuevo

objeto de configuración que está adaptada reglas de enrutamiento para cada ruta es una regla de concordancia objeto

Hay dos obligatorias en el objeto atributos :
pathes decir, las conexiones de enrutamiento de escucha no componentes decir que se mostrará componentes correspondientes
Ejemplo:{path:"/login",component:login}

②, y luego registre el objeto de regla de enrutamiento en el atributo de enrutador de la instancia de Vue

De esta manera, después de hacer coincidir la conexión de enrutamiento anterior, los componentes correspondientes en la parte posterior se muestran en la página para lograr el enrutamiento

<script>
    // 组件模板对象1
    var login={
        template:"<h1>登录</h1>"
    }
    // 组件模板对象2
    var register={
        template:"<h1>注册</h1>"
    }

    // 创建路由规则对象
    var routerObj=new VueRouter({
        // 定义路由匹配规则
        routes:[
            // component属性的值是模板对象 不是组件引用名称 不加引号
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       // 将路由规则对象注册到Vue实例上 监听URL地址的变化然后根据规则展示对应的组件
       router:routerObj
    });
</script>

3. Use el <router-view>marcador de posición de la etiqueta para mostrar el componente que coincide con la regla de enrutamiento en la etiqueta:

vue-router proporciona un <router-view>elemento para marcadores de posición
. Los componentes que coincidan con las reglas de enrutamiento se mostrarán en la etiqueta

<div id="app">
    <!-- 跳转的地址前面必须加上井号[#] 因为跳转到的并不是真实页面 而是锚点路由 -->
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    
    <!-- 路由规则匹配到的组件会展示到该标签上 -->
    <router-view></router-view>
</div>

Proceso de implementación:
hipervínculo y luego el usuario hace clic en la dirección URL de la página serán modificados
debido al objeto de ruta está Después de modificar la dirección URL será encaminado automáticamente a Vue en la instancia de inscripción escuchas a la dirección URL cambia direcciones inmediatamente enrutados coinciden
si partido Según la regla correspondiente, el componente correspondiente se muestra en el <router-view>marcador de posición de la página

---

Tercero, <router-link>configure el enlace de enrutamiento

Vue ofrece <router-link>ellas el uso de etiquetas de atributo para especificar la ruta de la dirección de conexión
<router-link> de etiquetas en la página por defecto representa como una etiqueta

Ejemplo:

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

Es igual a:

<a href="#/login">登录</a>
<a href="#/register">注册</a>

Puede usar el atributo de etiqueta para especificar la etiqueta que se representará:

<router-link to="/login" tag="span">登录</router-link>

---

Cuatro, enrutamiento de redireccionamiento

Monitor [ /] La ruta raíz muestra el componente especificado tan pronto como ingresa a la página

var routerObj=new VueRouter({
            // 定义路由匹配规则
            routes:[
                {path:"/",component:login},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })

Aunque este método se puede implementar, el anclaje de ruta que se muestra al ingresar a la página por primera vez sigue siendo la ruta raíz.
En este momento, la redirección real se puede lograr al especificar la ruta de redireccionamiento :{path:"/",redirect:"/login"}

var routerObj=new VueRouter({
            // 定义路由匹配规则
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })

Cabe señalar que la redirección aquí es diferente de la redirección en el lado del servidor. La redirección aquí es que el cliente modifica el valor hash para modificar la dirección de salto

---

Cinco, efecto de resaltado

Cuando la ruta de destino se activa correctamente, el elemento de enlace establecerá automáticamente un nombre de clase CSS que indica activación. Esta clase
estará presente en el componente cargado actualmente.router-link-active

Luego, siempre que agregue estilos a esta clase, puede lograr el efecto de resaltado:

<style>
    .router-link-active
    {
        color: aqua;
        font-size: 40px;
    }
</style>

El nombre de la clase también se puede especificar por sí mismo en las opciones de construcción de ruta linkActiveClass:

<script>
var routerObj=new VueRouter({
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ],
            // 自定义激活的类名
            linkActiveClass:"myactiveclass"
        })
</script>

<style>
    .myactiveclass
    {
        color: aqua;
        font-size: 40px;
    }
</style>

---

Sexto, transmisión de parámetros

El paso de parámetros es obtener los parámetros transportados en la URL solicitada en el componente de enrutamiento

Hay dos formas de pasar parámetros:
consulta y parámetros

1. método de consulta

Se utiliza $routepara obtener un atributo de consulta en el objeto de enrutamiento actual. El
atributo de consulta contiene todos los parámetros de consulta que contiene.

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

<script>
    var login={
        template:"<h1>登录</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

Entonces uso $route.query.属性名se pueden obtener
pueden pasar varios parámetros:

<router-link to="/login?id=1&name=陈涛">登录</router-link>

<script>
    var login={
    	// 用 $route.query.属性名 来获取参数
        template:"<h1>登录 - {{$route.query.id}} - {{$route.query.name}}</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

2. Parámetros

$routeExiste uno de los objetos de enrutamiento actuales obtenidos utilizando params属性
los parámetros de consulta que se llevan dentro.
Vue-router analiza internamente la ruta (ruta de solicitud) en una expresión regular y luego analiza la expresión regular en fullPath.

Cuando se solicita de esta manera, se superpone con barras :

<router-link to="/login/1">登录</router-link>

<script>
  var login={
        template:"<h1>登录</h1>",
        created()
        {
            // 组件的生命周期函数
            console.log(this.$route);
        }
    }
</script>

params propiedad donde hay parámetros de entrada:

por $route.params.属性名la adquisición
pueden pasar varios parámetros:

<router-link to="/login/1/陈涛">登录</router-link>

<script>
    var login={
        template:"<h1>登录 - {{$route.params.id}} - {{$route.params.name}}</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

---