¿El nombre del dominio de enrutamiento está en vue?
/*Importar constructor de Vue*/
Importar Vue desde "vue"
/*Importar enrutamiento VueRouter Constructor */
Importar enrutador vue desde "enrutador vue"
/*Importar página de inicio*/
'Importar vista de página de inicio desde'../views / HomeView.vue '
//Llame al método de uso del constructor Vue y pase el constructor de VueRouter.
//La función es insertar globalmente VueRouter como un complemento.
Vue.use(VueRouter)
/*Definir objeto de matriz de ruta*/
Ruta constante = [
? /*Un objeto corresponde a una ruta.
? Path es la dirección de la ruta.
? Dale a la ruta un nombre de pila.
? ¿Página de salto específica del componente
? */
? {
/* ruta: '/'Página raíz, indicando la página que se mostrará al ingresar */
Ruta: "/",
Nombre :' Inicio',
/*Este método se cargará cuando se ingrese a la página, no cuando se use.
El rendimiento no es tan bueno como la carga diferida*/
Componente: HomeView,
/*Después de ingresar a la página de inicio, puede usar la redirección para mostrar el primera subpágina.
? ¿Redireccionamiento seguido de nombre de ruta en lugar de nombre*/
? /*Como / es la ruta raíz, puedes escribir un */
Redireccionamiento: "one",
Hijo: [{
? Ruta: "uno",
? Nombre:'一',
? componente:()= >import('../views/oneview . vue’)
}]
? },
? {
/*Este es un directorio de primer nivel, por lo que puede agregar/especificar el directorio raíz*/
Ruta: "/about",
Nombre: "Acerca de",
//División de código a nivel de ruta
//Esto genera un fragmento separado (aprox. [hash].js) para esta ruta
//Carga diferida al acceder a la ruta.
/*Función de carga diferida: no cargar al principio, luego cargar nuevamente al cambiar de ruta*/
component:()= & gt; " */ '../views/about view . vue'),
/* about no es la ruta raíz, por lo que la redirección debe ir seguida de todos '/about/aboutchild ', */
Redirección: "/about/aboutchild",
Niño: [{
? Ruta:"Acerca de los niños",
? Nombre: "Acerca del niño",
? componente:()= & gt;import('../views/about child . vue’)
}]
? },
? {
Ruta: "/ChildA",
Nombre: "ChildA",
componente:()= & gt; /childa . vue')
? },
? {
/*Ruta: "*" debe tener la última*/
/* ruta:'* 'indica que la ruta anterior no coincide, y luego la siguiente página se ingresará*/
Ruta: "*",
Nombre: "No encontrado",
componente: () = & gt; ../componentes/ no encontrado .vue')
? }
]
/*Crea una instancia del constructor VueRouter para generar un objeto instanciado.
Y pase las rutas del objeto de la matriz de enrutamiento anterior como parámetro al constructor VueRouter*/
const router = new VueRouter({
?Route
})
/*¿El enrutador del objeto de enrutamiento instanciado se exporta de forma predeterminada? */
Exportar enrutador predeterminado
Archivo Main.js:
/*Importar constructor de Vue*/
Desde "vue" Importar Vue
/*Importar página del portal App.vue*/
Importar aplicación desde '. /App.vue '
/*Importe el objeto de creación de instancias del enrutador en la carpeta del enrutador index.js*/
/*Solo hay un archivo index.js en una carpeta. /router/index.js se puede abreviar como . /router en andamios? */
Importar enrutador desde '. /router'
/*Production Tips*/
/*Cambiar a false para desactivar los consejos para desarrolladores*/
Vue.config.productionTip = false
/*Configure EL en los parámetros del objeto de Vue: "# app" es igual. $montaje('#aplicación').
Solía instalarse en el div con el ID #app */
/*Configure el enrutador del objeto de instanciación de ruta en Vue para garantizar que el proyecto
all Todos los archivos vue pueden usar las propiedades y métodos de enrutamiento del enrutador*/
New Vue({
?router,
?/*Todos los archivos vue ser renderizado Al componente de la aplicación */
? render:h = >h(application)
}).$mount('#app')/*Equivalente a el: "#app" */
En el archivo viwes:
Archivo App.vue:
& lttemplate& gt
? & ltdiv id = " aplicación " & gt
& ltnav & gt
? <! El componente -router-link es responsable del salto y el atributo to se utiliza para escribir la ruta de salto.
? El componente Router Link es esencialmente un salto de ruta etiquetado. ¿El principio del salto de ruta se basa en
? Desde el punto de anclaje ->
? <router-link to="/" >Inicio </router-link>|
? & ltrouter-link to="/about " >Acerca de& lt/router-link & gt;|
? & ltrouter-link to="/ChildA " >¿Haz clic en mí para saltar al niño a
? & ltrouter-link to="/ChildB " >Haz clic en mí para saltar al niño b
& lt/nav & gt;
& lt. -El componente router-view es un contenedor para componentes de visualización ->;
& ltrouter-view/>
& lt! Instrucciones detalladas: cree dos componentes ChildA y ChildB y escriba dos enlaces de enrutador para implementar saltos.
? El componente se muestra en el contenedor de vista del enrutador ->
? & lt/div & gt;
& lt/template & gt;
& ltstyle & gt
#app {
? Familia de fuentes: Avenir, Helvetica, Arial, sans-serif
? -webkit-font-smoothing:anti-aliasing;
? -moz-osx-font-smoothing:escala de grises;
? Alineación del texto: centrado;
? Color: # 2c3e50
}
Navegación{
? Padding:30px
}
¿Navegación por {
? Peso de fuente: negrita;
? Color: # 2c3e50
}
/*.router-link-exact-active jump link se carga en router-link cuando se activa*/
Navegación a .router-link-accurate-active{
? Color: # 42b983
}
</style>
Archivo AboutView.vue:
<template>
? & ltdiv class = " about " & gt
& lth 1 & gt;¡Esta es una página acerca de& lt/h 1 & gt;
& lt! -La ruta se escribe después de->
<! -& lt;router-link to = "/about/about child " >Estoy preocupado por el niño
& lt! -Agregado en: Esta función analizará un objeto, no una cadena ->
& ltrouter-link:to = " { name:' about child ' } " >Estoy preocupado Niños
& lt! -Contenedor para visualización de ruta secundaria ->
<router-view></router-view>
? </div>
</template>
Archivo AboutChild.vue:
<template>
? & ltdiv & gt
? <h 1>¿Acerca de los niños</h 1>
? </div>
</template>
<script>
Exportar valor predeterminado {
}
& lt /script & gt;
& ltstyle & gt
& lt/style & gt;
Archivo vue HomeView:
&. lttemplate>
? & ltdiv class="home " >>p>
& lth 1 & gt; KW47 Chong Chong
& ltrouter-link to="/one " >ONEview & lt/router-link> ;
<! -El contenedor de componentes correspondiente a la ruta secundaria->;
& ltrouter-view>& lt/router-view>
? & lt/div & gt;
& lt/template & gt;
& ltscript>
// @es un alias para /src
Exportar valor predeterminado{
>
? Nombre: "Vista principal",
? Componente:{
? }
}
& lt/script & gt;
Archivo OneView.vue:
& lttemplate>
? & ltdiv & gt
? <h 1>Soy oneviwe
? </div>
</template>
<script>
Exportar valor predeterminado {
}
& lt /script & gt;
& ltstyle & gt
& lt/style & gt;
En el componente Debajo del archivo:
Archivo ChildA.vue:
& lttemplate>
? & ltdiv & gt
? <h 1>Soy un niño
? </div>
</template>
<script>
Exportar valor predeterminado {
}
& lt /script & gt;
& ltstyle & gt
& lt/style & gt;
Archivo ChildB vue:
& lttemplate>
? & ltdiv & gt
? <h 1>Soy Niño b
? </div>
</template>
<script>
Exportar valor predeterminado {
}
& lt /script & gt;
& ltstyle & gt
& lt/style & gt;
Archivo .vue no encontrado:
& lttemplate>
? & ltdiv & gt
? <h 1>¿No me encontraron
? </div>
</template>
<script>
Exportar valor predeterminado {
}
& lt /script & gt;
& ltstyle & gt
& lt/style & gt;
Directorio de archivos izquierdo: