enrutamiento vue, enrutamiento secundario y salto
★archivo index.js en el archivo del enrutador:
/* Importar constructor de Vue*/
importar Vue desde 'vue'
/* Importar constructor de enrutamiento VueRouter */
importar VueRouter desde 'vue-router'
/* Importar página HomeView*/
importar HomeView desde '.. /views/HomeView.vue'
//Llama al método de uso del constructor Vue y pasa el constructor de VueRouter
//La función es insertar globalmente VueRouter como un complemento. pulg. En Vue
Vue.use(VueRouter)
/* Definir un objeto de matriz de ruta*/
const route = [
? /* Un objeto corresponde a una ruta
? Ruta es la dirección de la ruta
? Nombre es el nombre que se le da a la ruta
? ¿Cuál es la página específica a la que saltar
? */
? {
/* ruta: '/' página raíz, que indica la página que se muestra después de ingresar * /
ruta: '/',
nombre: 'home',
/* Este método cargará todas las páginas tan pronto como se ingresen, no cuando se usan
p>El rendimiento no es tan bueno como el método de carga diferida*/
componente: HomeView,
/* Puedes usar redirigir para mostrar la primera subpágina después de ingresar a la página de inicio
?redirect va seguido del nombre de la ruta, no del nombre */
?/* Debido a que / es la ruta raíz, puede escribe uno directamente */
redirección: 'uno',
hijos: [{
ruta: 'uno',
? nombre: 'uno',
? componente: () =gt; import('../views/OneView.vue')
}]
? },
? {
/* Este es un directorio de primer nivel, por lo que puede agregar / para indicar la ruta del directorio raíz*/
: '/about',
nombre: 'about',
// división de código a nivel de ruta
// esto genera un fragmento separado (about. [hash].js) para esta ruta
// que se carga de forma diferida cuando se visita la ruta.
/* Función de carga diferida: no cargar al principio, luego cargar cuando cambias de ruta*/
componente: () =gt ; import(/* webpackChunkName: "about" */ '
../views/AboutView.vue'),
/* about no es la ruta raíz, por lo que se debe escribir el '/about/aboutchild' completo después de la redirección, */
redirección: '/ about/aboutchild',
niños: [{
? ruta: 'aboutchild',
nombre: 'aboutchild',
? componente: () =gt; import('../views/AboutChild.vue')
}]
},
? {
ruta: '/ChildA',
nombre: 'ChildA',
componente: () =gt; ./components/ChildA .vue')
? },
? {
/* ruta: '*' debe colocarse al final*/
/* ruta: '*' significa que si la ruta anterior no coincide, se ingresará a la página siguiente */
ruta: '*',
nombre: 'no encontrado',
componente: () =gt; import('../components/NotFound.vue')
}
?
/* El constructor de creación de instancias VueRouter genera un objeto de creación de instancias
y pasa las rutas de objetos de matriz de rutas anteriores como parámetro al constructor VueRouter*/
const router = new VueRouter({
? rutas
})
/* ¿Exportar el enrutador del objeto de enrutamiento instanciado de forma predeterminada?*/
exportar enrutador predeterminado
archivo main.js:
/* Importar constructor de Vue*/
importar Vue desde 'vue'
/ * Importar página de entrada de App.vue*/
importar aplicación desde './App.vue'
/* Importar el objeto de creación de instancias del enrutador en index.js en la carpeta del enrutador* /
/* Solo hay un archivo index.js en una carpeta en el scaffolding, ./router/index.js se puede abreviar como ./router?*/
import. enrutador de './router'
/* Avisos de producción*/
/* Cambie a falso para desactivar los avisos de desarrollador*/
Vue.config. ProductionTip = false
/* Configure el en los parámetros del objeto de Vue: "#app" es igual a .$mount('#app')
Ambos se usan para montar el id Para */
/* en el div de #app, configure el enrutador del objeto de instanciación de enrutamiento en Vue para garantizar que el proyecto
Todos los archivos vue pueden usar los atributos y métodos de enrutamiento del enrutador*/
new Vue({
? router,
? /* todos serán vue El archivo se representa en el componente de la aplicación*/
? render: h =gt; h(App)
}).$mount('#app')/* es equivalente a el : "#app" */
archivo viwes:
archivo App.vue:
lt; div id="app"gt;
lt;navgt;
? lt;!-- El componente router-link es responsable de saltar y el atributo to se utiliza para escribir el ruta de salto
El componente de enlace del enrutador esencialmente tiene una etiqueta para implementar el salto de ruta. El principio del salto de ruta se basa en
? >
?lt;router-link to="/"gt;Homelt;/router-linkgt; |
?lt;router-link to="/about"gt;Aboutlt;/router -linkgt |
lt; router-link to="/ChildA"gt; Haga clic en mí para saltar a ChildAlt;/router-linkgt |
? link to= "/ChildB"gt; Haga clic en mí para saltar ChildBlt;/router-linkgt |
lt;/navgt;
lt;!-- El componente de vista del enrutador se utiliza para mostrar Contenedor de componentes--gt;
lt;router-view/gt;
lt;!-- Cree dos componentes ChildA y ChildB y escriba dos enlaces de enrutador en lograr este salto
?El componente se muestra en el contenedor de vista del enrutador--gt;
?lt;/divgt;
lt;/templategt;
lt; stylegt;
#app {
? familia de fuentes: Avenir, Helvetica, Arial, sans-serif
? -webkit -font-smoothing: antialiased
? -moz-osx-font-smoothing: escala de grises;
? ? color: #2c3e50;
}
navegación {
? nav a {
? peso de fuente: negrita
? color: #2c3e50; link-exact -active se carga en router-link cuando se activa el enlace de salto*/
nav a.router-link-exact-a
activo {
? color: #42b983;
}
lt;/stylegt;
Archivo AboutView.vue:
lt;templategt;
?lt;div class="about"gt;
lt;h1gt;Esta es una página acerca delt;/h1gt;
lt;!-- Lo que se escribe después de es la ruta--gt;
lt;!-- lt;router-link to="/about/aboutchild"gt;Soy aboutchildlt ;/ router-linkgt; --gt;
lt;-- Después de, agregue: La función es analizar lo siguiente en un objeto en lugar de una cadena
<; p> lt; router-link: to="{name:'aboutchild'}"gt; Soy aboutchildlt;/router-linkgt;lt;!--Contenedor para visualización de enrutamiento secundario--gt ;
p>lt;router-viewgt;lt;/router-viewgt;
?lt;/divgt;
lt;/templategt;
Archivo AboutChild.vue:
lt;templategt;
lt;divgt;
lt;h1gt;AboutChildlt;/h1gt;
?lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
}
lt;/scriptgt;
lt;stylegt;
lt;/stylegt;
Archivo HomeView.vue :
lt;templategt;
?lt;div class="home"gt;
lt;h1gt;KW47 puñetazo rushlt;/h1gt;
lt; router-link to="/one"gt; ONEviewlt;/router-linkgt;
lt;!-- El contenedor de componentes correspondiente a la ruta secundaria--gt; /p>
lt;router-viewgt;/router-viewgt;
lt;/divgt; > lt; scriptgt;
// @ es un alias para /src
exportar el nombre predeterminado: 'HomeView',
? componentes: {
}
}
lt;
Archivo OneView.vue:
lt; plantillagt;
? divgt;
lt;
1gt;
?lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar predeterminado { p>
}
lt;/scriptgt;
lt;stylegt;
lt;/stylegt;
archivo de componentes Siguiente:
Archivo ChildA.vue:
lt; ; yo soy NIÑOAlt;/h1gt;
lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
}
lt;/scriptgt;
lt;stylegt;
lt;/stylegt;
Archivo ChildB.vue:
lt;templategt;
lt;divgt;
lt;h1gt;Soy ChildBlt;/h1gt ;
?lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
}
lt;/scriptgt;
lt;stylegt;
lt;/stylegt;
NotFound.vue archivo:
lt;templategt;
? lt;divgt;
lt;h1gt;No me han encontradolt;/h1gt;
lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
}
lt;/scriptgt;
lt;stylegt;
lt;/stylegt;
Directorio de archivos a la izquierda: